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

Glass Keynote Canvas Sting

A bright, keynote-style square sting where a cursor click opens Layerz Canvas, a frosted prompt box types a request and the wordmark collapses into black.

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 12-second square product sting for Layerz Canvas, 1080×1080 at 60 fps, with the bright, airy feel of a keynote reveal: lots of white, cool blues and frosted panels.

Look: page #FDFDFB with a pale haze #DCE8F6 that burns off during the first second. Ink #1E2F52; accents #2F6BFF, #3CC8F0 and #4ED6A0. Panels are white at 92% opacity with a 1px #E3E8EF edge, a soft shadow and a light background blur so they read as glass. SF Pro Display, weights 500–700. The only violet in the piece is the #7C5CFF caret in beat 3.

Beats:
- 0.0–2.3s, Window: a light app window (radius 64) fades up while a header lock-up rises from below the frame on a fast-out spring: a white disc (⌀120) holding the Layerz Canvas chevron, the words "Layerz Canvas" sharpening from 12px blur, and a dark capsule reading "Mac · iPhone · iPad". A cursor glides in from the top right, decelerates, tilts toward the disc, grows 1.5× on hover and clicks at 2.2s with a ripple. The camera eases in from 1.0 to 1.18 around the disc during the approach.
- 2.3–3.4s, Icon: hard cut on the click. A navy squircle icon (260px, white chevron) shrinks to 170px while four 88px rounded squares (white with a hairline edge, #2F6BFF, #3CC8F0, #4ED6A0) spiral in counter-clockwise, decelerate and lock into a cross around it.
- 3.4–5.3s, Prompt: the squares slide into a row and the cluster shrinks into a menu-bar item on a navy bar over a blue wallpaper. The cursor clicks it; a frosted prompt box springs out with a 4% overshoot and "Animate my logo in three beats" types one character per frame, with a short pause every few characters.
- 5.3–8.2s, Answer: whip-tilt upward with vertical blur into a canvas view. A timeline strip rises, three keyframe diamonds pop in sequence and a chevron on the artboard above jumps to each pose as its diamond lands.
- 8.2–10.0s, Features: two stacked glass cards rise 0.12s apart, each with a huge bold title cropped by its bottom edge: "Motion" and "Export".
- 10.0–12.0s, End: blur-dissolve to near-black #050507. The wordmark "Layerz Canvas" arrives oversized with horizontal zoom streaks (a dozen faded, scaled copies), settles at about 520px wide with a tight white glow, holds 0.8s, then collapses inward while blur rises to 4px. The film ends mid-collapse.

Craft notes: shots arrive mid-motion and exit by speeding up or ramping into blur; no crossfades; blur follows the direction of motion; the end card is the only still hold.

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.