{"id":"quote-card","version":"1.0.0","title":"Quote Card","summary":"A pull quote with a giant opening mark, words rising into place under a mask, a rule that draws itself and the author's name beneath.","kind":"text","target":"canvas2d","collections":["kinetic-text","product-reveals"],"tags":["quote","pull quote","testimonial","quotation","text reveal","social proof","author","editorial","serif","text animation"],"loopable":false,"motion":"procedural","durationSeconds":7,"status":"published","media":{"poster":"https://aipixelwizard.com/media/quote-card/1.0.0/poster.webp","preview":"https://aipixelwizard.com/media/quote-card/1.0.0/preview.mp4","sample":"https://aipixelwizard.com/media/quote-card/1.0.0/sample.mp4","sampleBytes":122059,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/quote-card","manifest":"https://aipixelwizard.com/api/v1/visuals/quote-card/versions/1.0.0","agentMd":"https://aipixelwizard.com/registry/quote-card/1.0.0/agent.md","files":"https://aipixelwizard.com/registry/quote-card/1.0.0/","demo":"https://aipixelwizard.com/registry/quote-card/1.0.0/index.html"},"description":"A pull quote that arrives like a magazine spread: a giant opening quotation mark scales in, the words rise into place a few at a time under a mask, a short rule draws itself and the author's name and role fade in beneath. The quote wraps by itself into lines that fit and picks the largest type size that suits. Type the quote, the author and the role, choose a theme (ink, rose, paper or mint), left or centred alignment and the backdrop colour.","role":"Text scene (Canvas 2D): testimonials, quotes and social-proof posts.","useCases":["A customer testimonial or review","An inspirational or editorial quote post","A speaker quote cut into a video"],"synonyms":["quote graphic","testimonial card","review quote","inspirational quote","citation","quote reveal"],"digest":"d3c1ee965f6e5149418f4de3ad43c0428cf4aae196134b6cd3905925ca077760","implementation":{"target":"canvas2d","runtime":"browser","language":"javascript","module":"esm","entry":"src/quote-card.js","exports":[{"name":"createQuoteCard","signature":"createQuoteCard({ quote?, author?, role?, theme?, align?, start?, fontFamily? }) => { draw(ctx, info, width, height), revealDuration }","description":"Canvas 2D text layer driven by info.time (seconds); draws on top of the canvas."},{"name":"THEMES","signature":"THEMES: { ink, rose, paper, mint }","description":"Quote, accent and muted colours."}],"reusable":["src/quote-card.js"],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"apw-runtime","version":"1.0.0","scope":"demo","reason":"Demo harness. The reusable source has no dependencies."}],"uses":[],"usedBy":[],"params":[{"key":"quote","label":"Quote","type":"text","default":"Make it move, then make it matter.","maxLength":140,"sensitive":true},{"key":"author","label":"Author","type":"text","default":"Ada Lowe","maxLength":30,"sensitive":true},{"key":"role","label":"Role","type":"text","default":"Motion designer","maxLength":44,"sensitive":true},{"key":"theme","label":"Theme","type":"select","default":"ink","options":[{"value":"ink","label":"Ink and gold"},{"value":"rose","label":"Rose"},{"value":"paper","label":"Paper"},{"value":"mint","label":"Mint"}]},{"key":"align","label":"Alignment","type":"select","default":"left","options":[{"value":"left","label":"Left"},{"value":"center","label":"Centred"}]},{"key":"background","label":"Backdrop","type":"color","default":"#14161c"}],"presets":[{"id":"default","label":"Ink and gold","params":{}},{"id":"rose","label":"Rose, centred","params":{"theme":"rose","align":"center","background":"#2a1218","quote":"The best ideas arrive when you stop forcing them.","author":"Mina Hart","role":"Founder, Hartwork"}},{"id":"paper","label":"Paper, editorial","params":{"theme":"paper","background":"#efe8d8","quote":"Good design is as little design as possible.","author":"Dieter Rams","role":"Industrial designer"}},{"id":"mint","label":"Mint, long quote","params":{"theme":"mint","background":"#0b1a16","quote":"We cut our edit time in half and the videos finally look the way we imagined them.","author":"Sam Rivera","role":"Head of content, Fieldnote"}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":7,"posterSeconds":5.2,"alpha":false,"motion":"procedural","loop":{"seamless":false,"method":"Not a loop: the card arrives and holds on the finished quote."},"seed":null},"composition":{"inputs":"Canvas 2D context, info.time (seconds), width, height.","outputs":"Draws the quote on top of the canvas; does not clear it.","coordinates":"The quote block is centred and 76% of the width wide; type size is chosen so it fits in at most five lines and half the height.","lighting":"None; the demo adds a soft accent glow and vignette.","timing":"Pure function of time; words rise 0.09 s apart; revealDuration says when everything has arrived.","compatibleWith":["kinetic-title","gradient-background"],"notes":["Text is treated as private: it is not stored in shared packs unless you choose to include it.","Very short quotes use the largest size, long ones step down to fit."]},"reuse":["Testimonial: Ink and gold.","Editorial: Paper.","Social post: Rose, centred."],"integration":{"newProject":"Create the card once, then each frame draw your backdrop and call card.draw(ctx, { time: frame / fps }, width, height).","existingProject":"Copy src/quote-card.js. Call draw on your existing 2D canvas after the rest of the frame."},"performance":{"notes":"One measureText per word per size tried, then one fillText per word per frame; negligible.","limits":"Quotes up to about 140 characters; longer text steps down to a small size."},"limitations":["System fonts differ between computers; pass fontFamily and load the font first for identical renders.","There is no hyphenation: a very long word can overflow the line."],"license":{"spdx":"MIT","notice":"Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.","thirdParty":[]},"rights":{"approvedForPublicRelease":true},"provenance":"Original code written for AI Pixel Wizard in October 2026, to the catalog quality bar (docs/QUALITY.md).","changelog":[{"version":"1.0.0","date":"2026-10-08","notes":"Initial release."}],"verification":{"testedOn":"2026-10-08","inputs":{"quote-card@1.0.0":"d3c1ee965f6e5149418f4de3ad43c0428cf4aae196134b6cd3905925ca077760","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d"},"environment":"Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0","renderer":"Canvas 2D","width":1080,"height":1080,"fps":30,"frames":210,"renderSeconds":16,"loopCheck":{"checked":false,"seamless":null,"maxDifference":null,"note":"Asset does not claim a seamless loop."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/quote-card/1.0.0/poster.webp","preview":"/media/quote-card/1.0.0/preview.mp4","sample":"/media/quote-card/1.0.0/sample.mp4","sampleBytes":122059}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/quote-card/1.0.0/LICENSE"},{"path":"asset.json","size":7138,"sha256":"dbe8f03b2466b8cd35ffdb0ef41efb654a4486d82306a5848f13a02fb4349ec5","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/quote-card/1.0.0/asset.json"},{"path":"demo.js","size":1180,"sha256":"023d2e8cc8835832e72ccd6adff1bff4f77d161f101f719e3102ceb6ce46ee66","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/quote-card/1.0.0/demo.js"},{"path":"index.html","size":524,"sha256":"1f91d7a401228d8cbdc0a1ad51eef82cf137848686d01253eb6a4c21871ecbd1","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/quote-card/1.0.0/index.html"},{"path":"src/quote-card.js","size":5549,"sha256":"26196d8d5142a1f7d33a38df6b430d0a758f0ce648d29f51e00ffd8032217fe4","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/quote-card/1.0.0/src/quote-card.js"}],"warnings":[]}