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

The Layerz Family

A detail-obsessed 15-second studio reel that introduces the Layerz apps as tiles and gathers them under one chevron.

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 15-second studio showreel (1920×1080, 60fps) for Layerz, the studio behind Layerz Canvas, App Designer, Moki, Lunar and PDF OCR. Each app gets a one-second moment as a tile, then the family gathers under the Layerz mark.

Look: studio black #0B0B0D, tile surfaces #1A1A1F with a 1px #2C2C33 border and radius 28, text #F1F1F4. Each app owns one accent: Layerz Canvas violet #7C5CFF, App Designer blue #3D8BFF, Moki coral #FF7A6B, Lunar silver-moon #C9D3E6, PDF OCR green #39C07A. A bold sans for names, a mono for tiny labels. Fine 3% grain, subtle vignette.

Beats:
- 0.0–1.5s: five thin accent lines shoot in from the frame edges and meet in the centre; on contact they flash and become five empty tiles in a row.
- 1.5–3.0s: Layerz Canvas tile: a chevron draws on, a tiny keyframe diamond bounces along a timeline beneath it.
- 3.0–4.5s: App Designer tile: a phone screen wireframe assembles from rectangles snapping onto a grid.
- 4.5–6.0s: Moki tile: a friendly rounded shape blinks and wiggles.
- 6.0–7.5s: Lunar tile: a crescent waxes to a full circle over a few stars.
- 7.5–9.0s: PDF OCR tile: a page with grey line bars; a green scan line passes and the bars turn into crisp text.
- 9.0–12.0s: the camera pulls back as the tiles rearrange into a tight 3+2 cluster; each tile's accent pulses once in sequence like a heartbeat.
- 12.0–15.0s: the tiles slide behind one another into a stack and the stack becomes a layered chevron, five accent edges peeking out; "Layerz" and "layerz.app" lock up beneath.

Craft notes: each app moment is exactly 1.5s with a 0.2s overlap; tile corners and borders stay pixel-consistent; never animate the same property on two tiles at once.

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.