canvas-materialize-moves
Shot recipes · A whole scene · Apache-2.0
- What it does
2 named moves on one card: panel-to-canvas (Checkboxes tick themselves, then table rows arc out of the panel and morph mid-flight into canvas cards, landing with casual tilts); diagram-cascade (A typed prompt sprouts a diagram tree: root, children, grandchildren pop layer by layer with connector lines drawing ahead of each node).
- Get it
Copy demos/interaction/canvas-materialize-moves/DiagramCascadeBuild.tsx (and its 1 sibling file(s) in the same folder) into a Remotion project with demos/_fixtures/Brand.tsx, demos/_fixtures/Look.tsx, demos/_fixtures/Polish.tsx; fix the import paths; then <Composition id="DiagramCascadeBuild" component={DiagramCascadeBuild} durationInFrames={DIAGRAM_CASCADE_BUILD_DURATION} fps={30} width={1920} height={1080} />. With the skill installed, say: "use the canvas-materialize-moves shot card". Read the card first: references/shots/interaction/canvas-materialize-moves.md.
- Needs (the whole pack)
Remotion 4 and React 19, and FFmpeg for its checks. No Tailwind, no CSS files, no web fonts.
- Re-skin
Edit the file (colors, logo, text)
No props (2 demo files). It starts from a named look in demos/_fixtures/Look.tsx (LOOKS.aurora, LOOKS.sand), but about 9 more color values are written in the demo, so changing the look alone will not re-skin it. Fonts come from the shared fixture files (FONT in Polish.tsx, type() in Look.tsx). The…
- License
Apache-2.0
- From