Charts That Grow Up

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

A 15-second showreel for the chart tools in Layerz Canvas, 1920×1080 at 60fps. One idea runs through it: data is never static — every chart grows out of the previous one.

Look: black #09090B, chart palette of Layerz violet #7C5CFF, mint #3DDC97, sky #4CC2FF, and cream #F2EFE8 for type. SF Pro Display bold for headlines, SF Mono for values. All numbers are clearly demo data.

Beats:
- 0.0–1.5s: a short link "layerz.app/canvas" types into a pill in the centre; a cursor clicks it and the pill splits into a horizontal baseline.
- 1.5–4.0s, bars: seven bars (Mon–Sun) grow from the baseline in a 60ms stagger with a slight spring; the tallest bar's value counts up to 1,284 "demo views".
- 4.0–6.0s, bar to line: the bar tops become dots, the bars drop away, and a mint line draws through the dots left to right. The camera rides along the line's head.
- 6.0–8.5s, line to area: the line's underside fills with a translucent mint area; a second sky series rises beneath it. A small legend slides in.
- 8.5–11.0s, area to donut: the whole chart shrinks into a circle and becomes a donut split into four segments (Web 42, iPhone 31, Mac 19, iPad 8) that sweep in clockwise. The centre counts to 100%.
- 11.0–13.0s, grid: the camera pulls back to reveal the donut is one tile of a 2×2 dashboard — bar, line, area, donut — all redrawing in sync, as if hit by a refresh.
- 13.0–15.0s, end: tiles slide away; "Charts that move." then the layered-chevron mark with "Layerz Canvas" and "layerz.app/canvas".

Craft notes: every chart-to-chart change is a shape morph, never a cut; one hero number per beat; colours keep their meaning across charts.