motion-advanced

Implement physics-based animation patterns for React and Next.js with motion/react.

5|Updated Jan 20, 2026

Search Tags:#frontend #react #animation #svg #motion #gestures

Ready to run

npx skills add https://github.com/mohamedgshoaib/reway --skill motion-advanced-mohamedgshoaib

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-advanced
Source: https://github.com/mohamedgshoaib/reway/tree/main/.agents/skills/motion-advanced
Command: npx skills add https://github.com/mohamedgshoaib/reway --skill motion-advanced-mohamedgshoaib

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the complexity of implementing high-fidelity, interactive motion patterns in React and Next.js that go beyond standard UI transitions, ensuring performance and natural feel.

Core Features & Use Cases

Advanced Gestures: Create drag-to-dismiss sheets, swipeable cards, and reorderable lists with physics-based transitions.
Imperative Control: Use the useAnimate hook for complex, interrupt-safe animation sequences and custom hooks for scroll-based reveals.
SVG & Text Animation: Implement path drawing, icon morphing, and character-by-character text reveals.
Use Case: Build a sophisticated mobile-first bottom sheet that supports drag-to-dismiss, shimmer loading states, and smooth entry/exit animations.

Quick Start

Use the motion-advanced skill to implement a drag-to-dismiss bottom sheet with physics-based transitions for the current component.

Frequently Asked Questions about motion-advanced

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a drag-to-dismiss bottom sheet in React?▼

Implement physics-based React animations for drag-to-dismiss sheets by using the motion/react library. This approach handles advanced gestures and ensures smooth, interrupt-safe transitions for interactive UI components.

How does imperative animation sequencing work in React?▼

Imperative animation sequencing uses the useAnimate hook to manage complex, interrupt-safe animation sequences in React. This provides precise control over multi-step timing and scroll-based reveals for interactive UI components.

Can I animate SVG path drawing and morphing in Next.js?▼

Yes, you can animate SVG path drawing and icon morphing in Next.js using the motion/react library. It supports path manipulation and character-by-character text reveals for high-fidelity interactive interfaces.

Do I need a token management skill to use advanced motion patterns?▼

Yes, advanced physics-based motion patterns require motion-foundations for token management. This prerequisite ensures proper animation variable handling and enforces performance rules like visibility-aware pausing and cleanup.

What is the best way to handle performance for React animations?▼

Handle React animation performance by enforcing strict visibility-aware pausing and cleanup rules. This ensures physics-based transitions and complex gesture animations maintain high UI responsiveness.

Why use physics-based transitions for React UI components?▼

Physics-based transitions provide a natural feel for React UI components beyond standard UI transitions. They enable sophisticated interactions like reorderable lists and swipeable cards that respond naturally to user input.