Gallery
Built by Claude with the Layerz Canvas MCPFully editable .lcanvas

Interface Reel Fifteen

A punchy 15-second UI showreel of cards, toggles, charts and kinetic type, every element built and animated in Layerz Canvas.

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.

Make a 15-second, 1920×1080 showreel that proves UI motion can be crafted entirely in Layerz Canvas. Fast, crisp, with one hero moment.

Look: light canvas #F4F5F7, cards #FFFFFF with 20pt corners and a soft 24pt shadow, ink #111318, grey #9AA0AA, accents electric blue #2E6BFF and tangerine #FF7A2F. Type: SF Pro Display bold for big words, SF Pro Text for UI.

Beats:
- 0.0–1.5s: Three huge words punch in one per half second, scale-pop with springs: "Design." "Move." "Ship."
- 1.5–4.5s: Words shrink into a button that reads "Ship". A cursor glides in, presses it (button squashes 6%, ripple), and the button expands into a full card.
- 4.5–8.0s: The card is a dashboard tile: a line chart draws on in blue, a counter rolls up to 98.6%, a toggle flips to on with a satisfying slide and colour change, a tangerine badge pops "+12" (illustrative).
- 8.0–11.0s: Hero moment. Camera pulls back fast to reveal 12 different cards in a 4×3 grid, all animating in a staggered wave: checkboxes ticking, sliders sliding, avatars stacking, a progress ring filling.
- 11.0–13.0s: The grid tilts back in 2.5D (rotationX 30°) and slides out of frame upward.
- 13.0–15.0s: Clean end card: the Layerz Canvas chevron mark in blue, "Every pixel animated in Layerz Canvas" in grey beneath.

Craft notes: springs everywhere for UI, ease-in-out only for camera; no hold longer than 0.5s until the end card; tangerine appears at most once per beat as a highlight.

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.