Web Animation Design
Answer animation, easing, and motion questions and review UI motion so microinteractions feel smooth and accessible on solo builder products.
Overview
Web Animation Design is an agent skill most often used in Build (also Ship perf, Launch distribution polish) that designs and implements purposeful web motion with easing, timing, and accessibility guidance.
Install
npx skills add https://github.com/vercel-labs/open-agents --skill web-animation-designWhat is this skill?
- Proactive triggers on easing, springs, stagger, GPU-friendly transforms, and prefers-reduced-motion
- Guidance grounded in Emil Kowalski’s animations.dev / Animations on the Web principles
- Required markdown table review format when auditing existing motion
- Covers modals, drawers, tooltips, gestures, and fixing janky transitions
- Library coverage: CSS transitions, Framer Motion, React Spring, GSAP
Adoption & trust: 129 installs on skills.sh; 5.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You know the UI should feel alive but your transitions are either absent, physically wrong, or janky and you do not know which easing, duration, or library pattern to apply.
Who is it for?
Solo builders shipping React or CSS-heavy UIs who want course-grade motion decisions without rewatching an entire animations curriculum.
Skip if: Teams needing automated visual regression of every frame or native iOS/Android motion systems with no web surface.
When should I use this skill?
User asks about animations, motion, easing, timing, duration, springs, transitions, performance, Framer Motion, React Spring, GSAP, prefers-reduced-motion, or making UI motion feel smooth.
What do I get? / Deliverables
You get concrete motion recipes, library-specific patterns, and structured animation reviews so interactions feel smooth, performant, and respect prefers-reduced-motion.
- Easing, duration, and pattern recommendations for the requested UI element
- Structured markdown animation review when auditing existing motion
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Motion design is implemented in the UI layer during product build, which is where solo builders wire transitions, hovers, and page motion. Frontend is the canonical shelf because the skill targets CSS transforms, libraries like Framer Motion and GSAP, and component-level entrance and exit patterns.
Where it fits
Pick ease-out timing and stagger for a dashboard list reveal without over-animating data-heavy views.
Diagnose janky transforms and tune will-change and GPU-friendly opacity transitions before release.
Refine landing-page hero and CTA hover motion so the marketing site feels premium on first visit.
How it compares
Use for opinionated motion craft and review checklists, not as a drop-in animation component library or Lottie asset pack.
Common Questions / FAQ
Who is web-animation-design for?
Indie and solo frontend builders using Claude Code, Cursor, or similar agents who want help choosing easing, timing, springs, and accessible motion for web UIs.
When should I use web-animation-design?
During Build when implementing hovers, modals, and page transitions; during Ship when tuning jank and GPU-friendly transforms; and during Launch when polishing marketing motion and microinteractions.
Is web-animation-design safe to install?
It is procedural guidance text with no built-in tool execution; review the Security Audits panel on this Prism page and inspect the SKILL.md in the repo before installing in your agent.
SKILL.md
READMESKILL.md - Web Animation Design
# Web Animation Design A comprehensive guide for creating animations that feel right, based on Emil Kowalski's "Animations on the Web" course. ## Initial Response When this skill is first invoked without a specific question, respond only with: > I'm ready to help you with animations based on Emil Kowalski's animations.dev course. Do not provide any other information until the user asks a question. ## Review Format (Required) When reviewing animations, you MUST use a markdown table. Do NOT use a list with "Before:" and "After:" on separate lines. Always output an actual markdown table like this: | Before | After | | --------------------------------- | ----------------------------------------------- | | `transform: scale(0)` | `transform: scale(0.95)` | | `animation: fadeIn 400ms ease-in` | `animation: fadeIn 200ms ease-out` | | No reduced motion support | `@media (prefers-reduced-motion: reduce) {...}` | Wrong format (never do this): ``` Before: transform: scale(0) After: transform: scale(0.95) ──────────────────────────── Before: 400ms duration After: 200ms ``` Correct format: A single markdown table with | Before | After | columns, one row per issue. ## Quick Start Every animation decision starts with these questions: 1. **Is this element entering or exiting?** → Use `ease-out` 2. **Is an on-screen element moving?** → Use `ease-in-out` 3. **Is this a hover/color transition?** → Use `ease` 4. **Will users see this 100+ times daily?** → Don't animate it ## The Easing Blueprint ### ease-out (Most Common) Use for **user-initiated interactions**: dropdowns, modals, tooltips, any element entering or exiting the screen. ```css /* Sorted weak to strong */ --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1); --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); ``` Why it works: Acceleration at the start creates an instant, responsive feeling. The element "jumps" toward its destination then settles in. ### ease-in-out (For Movement) Use when **elements already on screen need to move or morph**. Mimics natural motion like a car accelerating then braking. ```css /* Sorted weak to strong */ --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1); --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1); --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); ``` ### ease (For Hover Effects) Use for **hover states and color transitions**. The asymmetrical curve (faster start, slower end) feels elegant for gentle animations. ```css tra