mcpField
A
adding-animations

adding-animations

github.com/fusengineDesign & UI3450 installsUpdated 2w ago
Repository

About adding-animations

adding-animations is a design skill for adding motion and interactive visual states to generated HTML/CSS components. It guides implementation with Framer Motion, design-system motion settings, and reduced-motion accessibility requirements.

Key features

  1. 01Scroll-triggered entrance animations
  2. 02Hover, focus, disabled, and loading states
  3. 03Page transitions and micro-interactions
  4. 04Layered visual effects
  5. 05Reduced-motion accessibility guidance

Use cases

  1. 01Animate sections and cards in generated pages
  2. 02Add consistent feedback to interactive elements
  3. 03Apply route transitions before a design audit

MCP support

The skill directs implementation through `mcp__gemini-design__modify_frontend` to add Framer Motion code to existing components.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/fusengine/agents --skill adding-animations

After installing, type/adding-animationsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
entrance-patterns.md
glassmorphism-advanced-ref.md
interactive-states-ref.md
layered-backgrounds-ref.md
micro-interactions.md
motion-patterns.md
motion-principles.md
page-transitions.md
patterns-buttons.md
patterns-cards.md
patterns-microinteractions.md
patterns-navigation.md
reduced-motion.md

Details

From the project README

Phase 4: ADDING ANIMATIONS — Motion, states, and visual effects

When

After Phase 3 components are generated. Before design audit.

Input (from Phase 3)
  • Generated HTML/CSS components with variants and layouts.
  • Motion personality from design-system.md (corporate / modern / playful / luxury).
Steps
  1. Read motion personality from design-system.md — determines timing, easing, and intensity.
  2. Entrance animations — EVERY section must animate on scroll (IntersectionObserver). Stagger children by 80-120ms. Use fadeUp (translateY 30px→0) + fadeIn (opacity 0→1). Cards stagger in grid order.
  3. Hover depth — buttons: translateY(-3px) + shadow-lg + brightness(1.05). Cards: translateY(-8px) + shadow-xl + scale(1.01). Links: color transition 150ms.
  4. Focus/disabled — :focus-visible with 2px outline + 4px offset. :disabled with opacity 0.4 + cursor not-allowed. MANDATORY on all interactive elements.
  5. Visual layers — glassmorphism on nav (backdrop-blur 12px + bg oklch/0.85). Hero gradient overlay (oklch dark/0.6→transparent). Section separators (clip-path polygon or SVG wave). Background gradient orbs (radial-gradient oklch with blur).
  6. Micro-interactions — button press scale(0.97), toggle slide 200ms, form input focus border-color transition, loading skeleton pulse animation.
  7. Add page transitions from references/page-transitions.md — route-level animations.
  8. Implement — Use mcp__gemini-design__modify_frontend to inject Framer Motion code into existing components.
  9. Validate accessibility — prefers-reduced-motion support required. Timing limits: hover <100ms, modal <300ms, page <400ms (see references/motion-principles.md).
Output
  • All components animated with Framer Motion matching the motion personality.
  • Interactive states (hover, focus, active, disabled, loading) on every interactive element.
  • Visual effects applied where allowed. Reduced-motion fallbacks included.
Next → Phase 5: DESIGN AUDIT

5-design-audit/SKILL.md — Audit visual consistency, accessibility, and anti-AI-slop.

References
FilePurpose
references/motion-patterns.mdCore Framer Motion patterns
references/motion-principles.mdTiming limits and principles
references/entrance-patterns.mdEntrance animation patterns
references/interactive-states-ref.mdState definitions (hover, focus, etc.)
references/micro-interactions.mdMicro-interaction patterns
references/glassmorphism-advanced-ref.mdGlassmorphism techniques
references/layered-backgrounds-ref.mdLayered background effects
references/page-transitions.mdRoute-level transitions
references/patterns-cards.mdCard animation patterns
references/patterns-buttons.mdButton animation patterns
references/patterns-navigation.mdNavigation animations
references/patterns-microinteractions.mdDetail micro-interactions
references/reduced-motion.mdprefers-reduced-motion a11y patterns

Comments

Markdown supported