motion-advanced

Topics in the source

• Motion Advanced
• When to Activate
• Outputs
• Principles
• Rules
• Decision Guidance
• Choosing the right advanced API
• When to use useSpring vs a spring transition

Complex, interactive, and physics-based animation patterns. Requires motion-foundations to be set up first. Use these when motion-patterns is not enough. 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 This skill produces: Drag interactions: draggable cards, drag-to-dismiss sheets, Reorder.Group lists 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 useAnimate with interrupt-safe async/await Loader components: spinner, shimmer, pulse dot, progress bar, button loading state Physics-based motion (useSpring, springs.) always feels more natural than du

This is an excerpt. Refer to the complete source and its current requirements.