Built by Claude with the Layerz Canvas MCPFully editable .lcanvas
Prompt to Poster
A seamless hero loop for a website: Claude types one prompt and a Layerz Canvas poster builds itself, then rewinds into the next prompt.
Vector shapes and keyframes playing live in your browser — no video file. Click it to pause.Open full screen
The prompt behind it
Claude made this from the prompt below, working directly in Layerz Canvas through its MCP server. Paste it into Claude (Claude Code or Claude Desktop) with the Layerz Canvas MCP connected and it builds a new take on the same canvas — then you take over. Connect the MCP server
Prompt
Build this in Layerz Canvas using the layerz-canvas MCP.
A 16-second hero loop (1920×1080, 60fps) for a landing page: a prompt is typed to Claude and a finished poster assembles itself in Layerz Canvas, then everything folds back into the input field for the next prompt.
Look: off-white #F7F7F5 page, ink #18181B, card grey #EDEDED, Claude violet #7C5CFF for the prompt and the building process. Rounded input (radius 28) centred in the lower third. Generated posters use bold flat illustration built from shapes.
Beats:
- 0.0–2.5s: an empty prompt field with a blinking caret. Text types on: "A summer jazz night poster, warm and loose."
- 2.5–4.0s: press: the send button pulses violet; a thin violet progress line runs around the input's border.
- 4.0–8.5s: build. Above the input a 4:5 artboard appears. Layers arrive in a visible order, each with a violet outline flash as it lands: background (#F2A65A), a big sun circle, a stylised saxophone made of 6 simple paths, the title "Night Jazz" in heavy serif, a date line, a grain effect.
- 8.5–10.0s: two variations slide in beside it (teal and plum palettes), the three posters fanning slightly.
- 10.0–12.5s: the cursor picks the first; the others slide away; the chosen poster gets a quick export stamp: "PNG · PDF · MP4".
- 12.5–16.0s: the poster shrinks and dives into the input field, which clears and starts typing a second prompt, "A minimal tech meetup flyer…", matching the first frame's layout so the loop is seamless.
Craft notes: layers always build back to front; every new layer gets the same 120ms violet flash; the input never moves, it is the anchor of the loop.
Edit it yourself
Change colours, text and type in the inspector.
Drag keyframes, reshape easing curves and retime any move.
Ask Claude for changes through the MCP, then fine-tune by hand.
Export it as an image, a video, Lottie or a web page like this one.