Animated-Driven Frontend

Use this skill to turn UIs into directed experiences: clear narrative flow, responsive interactivity, and optional worldbuilding. Motion is not decoration by default. It is a communication layer.

When to use

Use this skill when the user requests animated UI direction, interaction choreography, motion systems, playful/creative coding interactions, or immersive UI metaphors.

Default preference (with escalation)

• Default motion library: motion / motion/react (Framer Motion successor) for UI choreography.
• Never use framer-motion in this codebase.
• Escalate to GSAP for scrolltelling or timeline-heavy sequences.
• Use react-spring when nuanced physics control is central.
• Use 3D (Three.js / react-three-fiber) only when depth or spatial metaphor strengthens the narrative.
• Sound is optional; if used, it must be user-controllable and accessible.

For full stack selection rules and dependency checks, see: references/STACK-PREFERENCES.md.

Core principles