motion-scene

Installation
SKILL.md

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.

Installs
2
GitHub Stars
3
First Seen
12 days ago