📖 Step 3: Design - UI Components & Patterns#85 / 291
Motion Design
Motion Design
📖One-line summary
Designing motion for screen transitions, element entrances, and more.
✨Example
Elements enter/exit with motion (auto-looping)
⚡Vibe coding prompt examples
>_
Build a page transition motion with Framer Motion. Apply a shared layout animation when navigating from list to detail.
>_
Build a scroll-triggered motion where elements appear. Use a stagger effect so cards slide-up sequentially.
>_
Build a motion sequence where content appears after loading completes. Implement an orchestration that fades in logo > title > body > buttons in order.
Try these prompts in your AI coding assistant!