Prompt to Pixels Pipeline

Build this in Layerz Canvas using the layerz-canvas MCP.

A 15-second explainer diagram, 1920×1080 at 60fps: how a sentence typed to Claude becomes a finished animation in Layerz Canvas. Clean, technical, satisfying.

Look: near-black #0C0C0E, node cards in #18181C with 1px #2A2A30 borders, Claude clay #D97757 for anything Claude does, Layerz violet #7C5CFF for anything Layerz Canvas does, white text. SF Pro for labels, SF Mono for calls.

Beats:
- 0.0–2.5s, ask: a chat bubble types "Make a 5-second logo sting with a bouncy chevron." A clay starburst icon next to it spins once.
- 2.5–5.0s, think: the bubble shrinks into a clay dot that travels right along a drawn connector to a node labelled "Claude". Three small sub-steps pop out above it like a thought stack: "plan beats", "pick colours", "write calls".
- 5.0–8.0s, calls: from Claude, a rail labelled "MCP" draws toward a violet node "Layerz Canvas". Four call pills ride along the rail in a stagger: "new document", "draw path", "add keyframes", "export video", each in tiny mono type.
- 8.0–11.0s, build: the violet node opens into a mini canvas. A chevron path draws on, keyframe diamonds tick onto a timeline, and the chevron bounces with a spring. The camera pushes into the mini canvas.
- 11.0–13.0s, ship: an MP4 file chip drops out of the canvas and rides the rail back to the chat, landing as a reply bubble with a play triangle.
- 13.0–15.0s, end: the whole diagram slides into a tidy line — Claude ↔ MCP ↔ Layerz Canvas — then condenses into "Claude × Layerz Canvas".

Craft notes: data always moves left to right on the way in and right to left on the way back; connectors draw on before anything travels on them; each node lights up only while it's working.