Motion Designer

The motion-designer skill leverages animation principles to generate dynamic visual effects and interactive movements for web interfaces. It transforms static elements into engaging experiences by applying timing, easing, and spatial dynamics directly within the frontend codebase.

When to use it

• Enhance landing page hero sections with smooth entrance animations that guide user attention.
• Create micro-interactions for buttons or form inputs to provide immediate visual feedback.
• Add parallax scrolling effects or floating elements to increase site depth and perceived quality.
• Implement loading sequences that replace boring spinners with branded, principle-based motion graphics.

Key capabilities

• Applies classic 12 principles of animation (squash and stretch, anticipation, easing) to CSS and JS.
• Generates keyframe animations without requiring external libraries or heavy assets.
• Adjusts physics-based parameters like gravity, bounce, and friction for organic movement.
• Integrates seamlessly with React, Vue, or vanilla JavaScript environments.

Example prompts

"Create a hero section animation where the main headline slides in from the left while the subtext fades up with a slight delay." "Add a bouncing effect to my submit button that uses squash and stretch principles when hovered over." "Design a loading screen sequence using floating geometric shapes that rotate and scale with easing curves."

Tips & gotchas

Ensure your target devices can handle the increased rendering load from complex animations, especially on mobile. Test performance metrics like frame rate before deploying to production to avoid jank or battery drain.