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

Morph Playground

A 15-second feature showcase of Layerz Canvas path morphing, with primitives transforming in a playful chain and kinetic labels.

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.

Show off path morphing in Layerz Canvas in a playful 15-second, 1920×1080 chain reaction: every shape becomes the next one, nothing ever just appears.

Look: cream background #FFF8EE, ink #1B1B1F, bright flat palette: tomato #FF5A3C, sunflower #FFC93C, cobalt #3A5BFF, mint #2DD4A7. Thick 6pt outlines on everything, offset flat shadow 8pt down-right in ink. Type: SF Pro Rounded heavy.

Beats:
- 0–2s: A tomato circle bounces in from the top, squashing on landing.
- 2–4s: It morphs into a sunflower star that spins half a turn. Label "morph" pops beside it.
- 4–6s: The star morphs into a cobalt heart that beats twice.
- 6–8s: The heart splits into two mint squares via a boolean-style slice; they slide apart, rotate and morph into the letters "L" and "C".
- 8–11s: The letters run around the frame like characters, jumping over a rolling tomato ball, then collide and pop into a burst of confetti in all four colours.
- 11–13s: Confetti falls and gathers into a pile that morphs into a chevron.
- 13–15s: The chevron settles with a spring. "Layerz Canvas" writes in beside it; under it a small kinetic line: "shapes that turn into shapes."

Craft notes: every morph lasts 0.5–0.7s with ease-in-out and a small overshoot; each shape squashes 8% when it lands; the shadow offset is constant so the whole thing reads like a sticker world.

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.