Web Motion Design

What it does

This skill equips AI agents with the ability to apply core animation principles specifically tailored for web environments. It enables the generation of smooth, performant motion that enhances user engagement and visual storytelling on digital interfaces.

When to use it

• Creating micro-interactions like button presses or form field focus states.
• Designing page transition effects that guide user attention between sections.
• Developing loading animations that maintain perceived performance during data fetching.
• Building scroll-triggered reveal effects for narrative-driven landing pages.

Key capabilities

• Applies the 12 principles of animation (e.g., easing, timing) to web contexts.
• Generates code or design specs for motion that adheres to performance budgets.
• Creates visually cohesive animations that align with brand identity and UX goals.

Example prompts

• "Generate a CSS keyframe animation for a 'Subscribe' button that uses squash and stretch on click."
• "Design a scroll-triggered fade-in sequence for product cards using GSAP principles."
• "Create a loading skeleton animation that mimics the content layout with staggered delays."

Tips & gotchas

Ensure animations are lightweight to avoid jank, especially on mobile devices. Always test motion at different frame rates to guarantee smooth playback across browsers.