Animate
Implement performant, accessible motion in Next.js and React using CSS and Framer Motion patterns instead of guessing easing and duration.
Overview
Animate is an agent skill for the Build phase that implements Next.js and React UI motion with CSS and Framer Motion using documented easing and duration rules.
Install
npx skills add https://github.com/delphi-ai/animate-skill --skill animateWhat is this skill?
- Easing cheat sheet: ease-out enter, ease-in exit, ease-in-out move, 150–300ms durations
- CSS custom properties for quint/cubic beziers recommended over one-off curves
- Patterns: hover lift, button press, modal overlay, staggered lists, page transitions
- Framer Motion snippets aligned with Next.js App Router usage
- Accessibility notes: prefers-reduced-motion and opacity-first motion
- 5-row easing cheat sheet for enter, move, exit, hover, and opacity
Adoption & trust: 594 installs on skills.sh; 32 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your app motion feels arbitrary—wrong easing on enter/exit, sluggish hovers, or animations that ignore accessibility settings.
Who is it for?
Solo founders and frontend-heavy indies polishing SaaS UI, marketing sites, and React component libraries on Next.js.
Skip if: Native iOS/Android animation stacks, game engines, or teams that forbid client-side motion libraries entirely.
When should I use this skill?
Use when implementing animations, transitions, hover effects, page transitions, modals, or any motion in React components.
What do I get? / Deliverables
Components gain consistent, performant transitions and documented patterns you can reuse across pages and modals.
- Component-level animation implementations
- Reusable CSS variable easing tokens
- Documented motion patterns in codebase
Recommended Skills
Journey fit
How it compares
Use for UI transition recipes instead of asking the model for random animation snippets on each component.
Common Questions / FAQ
Who is animate for?
React and Next.js builders who want course-backed animation defaults while implementing components and pages.
When should I use animate?
During Build frontend when adding hovers, modals, list stagger, or route transitions, or when refactoring jittery CSS transitions before Ship perf review.
Is animate safe to install?
Check the Security Audits panel on this Prism page; the skill is documentation-forward and does not require network access by itself.
SKILL.md
READMESKILL.md - Animate
# Next.js Animations ## Overview This skill provides comprehensive guidance for implementing smooth, performant, and accessible animations in Next.js and React applications. It covers CSS animations, Framer Motion, easing principles, and accessibility considerations. ## Quick Reference ### Easing Cheat Sheet | Animation Type | Easing | Duration | |----------------|--------|----------| | Element entering | `ease-out` | 200-300ms | | Element moving on screen | `ease-in-out` | 200-300ms | | Element exiting | `ease-in` | 150-200ms | | Hover effects | `ease` | 150ms | | Opacity only | `linear` | varies | ### CSS Custom Properties (Recommended) ```css :root { --ease-out-quint: cubic-bezier(.23, 1, .32, 1); --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1); --ease-out-cubic: cubic-bezier(.33, 1, .68, 1); } ``` ## Common Animation Patterns ### 1. Hover Lift Effect ```css .card { transition: transform 200ms var(--ease-out-quint), box-shadow 200ms var(--ease-out-quint); } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); } ``` ### 2. Button Press ```css .button { transition: transform 100ms ease-out; } .button:active { transform: scale(0.97); } ``` ### 3. Fade In on Mount (Framer Motion) ```tsx <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.3, ease: [.23, 1, .32, 1] }} > Content </motion.div> ``` ### 4. Modal with Exit Animation ```tsx <AnimatePresence> {isOpen && ( <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} transition={{ duration: 0.2, ease: "easeOut" }} > {children} </motion.div> )} </AnimatePresence> ``` ### 5. Tab Indicator (Shared Layout) ```tsx {tabs.map(tab => ( <button key={tab} onClick={() => setActive(tab)} className="relative px-4 py-2"> {tab} {active === tab && ( <motion.div layoutId="tab-indicator" className="absolute inset-0 bg-blue-500 rounded -z-10" transition={{ type: "spring", stiffness: 400, damping: 30 }} /> )} </button> ))} ``` ### 6. Staggered List Animation ```tsx const container = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1 } } } const item = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0 } } <motion.ul variants={container} initial="hidden" animate="visible"> {items.map(i => <motion.li key={i} variants={item}>{i}</motion.li>)} </motion.ul> ``` ## Golden Rules 1. **Exits faster than enters**: Exit animations should be ~75% of enter duration 2. **Only animate transform and opacity**: These are GPU-accelerated 3. **200-300ms is the sweet spot**: Most animations should be in this range 4. **Always respect prefers-reduced-motion**: See accessibility section in references 5. **Use springs for interruptible animations**: Better UX when users interrupt ## Examples Complete working examples from the course are in the `examples/` directory: | Example | Description | Key Techniques | |---------|-------------|----------------| | `card-hover.tsx` | Slide-up description on hover | CSS transitions, transform, opacity | | `toast-stacking.tsx` | Animated toast notifications | CSS custom properties, data-* triggers | | `text-reveal.tsx` | Staggered letter animation | @keyframes, animation-delay, calc() | | `shared-layout.tsx` | Element position/size morph | Framer Motion layoutId | | `animate-height.tsx` | Smooth height changes | useMeasure, animate height | | `multi-step-flow.tsx` | Directional step wizard | AnimatePresence, custom var