motion-scene
motion-scene
A scene is a looping, decorative React component that shows a mechanism (input -> processing -> output) inside a fixed slot of a web app: the media area of a project card, the art column of a service card, a hero panel, a diagram in a docs page. The bar is accuracy. Someone who knows the subject should recognise its mechanism in one glance at card size. A generic "dashboard with bars" is a failure even when it looks good.
Delivery target is scene (a React + Motion component). Timing presets use the shared names micro, short, medium (default), long and ambient.
Which skill
| Need | Skill |
|---|---|
| Animated component rendered inside a React app (card art, hero, diagram, illustration) | motion-scene |
One self-contained .svg for a README, docs site or <img> (no script, SMIL and CSS only) |
animated-svg |
| Review or fix an existing SVG file or scene component | svg-audit |
If the app is not React, or the art must also work as a plain image, use animated-svg. If the user only wants a quick hover or press effect on existing UI, that is a micro interaction, not a scene; apply the spring rules in references/motion.md directly.
Settle these first
Infer from the codebase; ask only what cannot be inferred.