Bento Feature Grid

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

Make a 30-second, 1920×1080, 60 fps feature tour for Layerz Canvas built on a bento grid: rounded tiles that swap, resize and come alive.

Look: light background #F2F1EE, tiles white #FFFFFF with 28 pt corners and a soft shadow, a few tiles in solid colour (violet #7C5CFF, coral #FF6B4A, lime #C6F24E, ink #16161A). 24 pt gutters everywhere. SF Pro Display Semibold headings, SF Pro Text labels.

Beats:
- 0–3s: an empty 4×3 grid of hairline outlines; tiles pop into the cells in a diagonal stagger.
- 3–7s: tile "Vector": a pen path draws a curve, handles appear, the shape fills. Tile "Type": a word, "Kinetic", bounces in per letter.
- 7–11s: the grid reshuffles: the "Timeline" tile grows to span two columns while others slide aside. Inside, keyframe diamonds pop on in sequence and an easing curve morphs from linear to spring.
- 11–15s: tile "Charts": a donut chart sweeps in; tile "Code": a small window types three lines; tile "Particles": confetti bursts once.
- 15–19s: a phone tile rotates in with a 2.5D tilt: an iPhone outline drawn from shapes, showing the same canvas in miniature. A tile beside it reads "Mac · iPhone · iPad".
- 19–24s: the camera zooms into the "Export" tile; format chips cascade: PNG, SVG, PDF, MP4, MOV, GIF, APNG, Lottie, HTML. Pull back out.
- 24–27s: tiles fly together and merge into one large tile in violet.
- 27–30s: inside it, the white chevron mark and "Layerz Canvas" lock up, with "layerz.app/canvas" below.

Craft notes: the grid never breaks: every rearrangement snaps to the same columns and gutters; resize with springs (slight overshoot), contents never distort while a tile resizes; each tile gets one idea only.