Motion Advanced
Complex, interactive, and physics-based animation patterns.
Requires motion-foundations to be set up first.
Use these when motion-patterns is not enough.
When to Activate
- Building drag-to-dismiss sheets, swipe gestures, or reorderable lists
- Animating text word-by-word, character-by-character, or as a live counter
- Drawing SVG paths, morphing icons, or animating circular progress
- Writing a custom animation hook (
useScrollReveal, magnetic button, cursor follower) - Sequencing multi-step animations imperatively with
useAnimate - Building spinners, shimmer skeletons, pulse indicators, or loading button states
Outputs
This skill produces:
- Drag interactions: draggable cards, drag-to-dismiss sheets,
Reorder.Grouplists - Gesture hooks: swipe detection, long press, pinch outline
- Text animation components: word reveal, character typewriter, number counter
- SVG animation: path draw-on, icon morph, stroke progress ring
- Custom hooks:
useScrollReveal,useHoverScale,useNavigationDirection,useInViewOnce - Imperative sequences via
useAnimatewith interrupt-safeasync/await - Loader components: spinner, shimmer, pulse dot, progress…
