Skill

adding-animations

Phase 4: Add Framer Motion scroll reveals (IntersectionObserver), hover scale/opacity transitions, focus ring states, loading skeletons, glassmorphism blur layers, gradient orb backgrounds — all via modify_frontend.

From fuse-design

Install

Run in your terminal

npx claudepluginhub fusengine/agents --plugin fuse-design

Tool Access

This skill uses the workspace's default tool permissions.

Supporting Assets

View in Repository

references/entrance-patterns.md

references/glassmorphism-advanced-ref.md

references/interactive-states-ref.md

references/layered-backgrounds-ref.md

references/micro-interactions.md

references/motion-patterns.md

references/motion-principles.md

references/page-transitions.md

references/patterns-buttons.md

references/patterns-cards.md

references/patterns-microinteractions.md

references/patterns-navigation.md

references/reduced-motion.md

Skill Content

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.6k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

evaluation-methodology

1 file

Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.

plugin-eval

32.9k

Stats

Parent Repo Stars4

Parent Repo Forks0

Last CommitMar 26, 2026

Actions

View Source View Plugin View on GitHub View 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

Read motion personality from design-system.md — determines timing, easing, and intensity.
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.
Hover depth — buttons: translateY(-3px) + shadow-lg + brightness(1.05). Cards: translateY(-8px) + shadow-xl + scale(1.01). Links: color transition 150ms.
Focus/disabled — :focus-visible with 2px outline + 4px offset. :disabled with opacity 0.4 + cursor not-allowed. MANDATORY on all interactive elements.
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).
Micro-interactions — button press scale(0.97), toggle slide 200ms, form input focus border-color transition, loading skeleton pulse animation.
Add page transitions from references/page-transitions.md — route-level animations.
Implement — Use mcp__gemini-design__modify_frontend to inject Framer Motion code into existing components.
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

File	Purpose
`references/motion-patterns.md`	Core Framer Motion patterns
`references/motion-principles.md`	Timing limits and principles
`references/entrance-patterns.md`	Entrance animation patterns
`references/interactive-states-ref.md`	State definitions (hover, focus, etc.)
`references/micro-interactions.md`	Micro-interaction patterns
`references/glassmorphism-advanced-ref.md`	Glassmorphism techniques
`references/layered-backgrounds-ref.md`	Layered background effects
`references/page-transitions.md`	Route-level transitions
`references/patterns-cards.md`	Card animation patterns
`references/patterns-buttons.md`	Button animation patterns
`references/patterns-navigation.md`	Navigation animations
`references/patterns-microinteractions.md`	Detail micro-interactions
`references/reduced-motion.md`	prefers-reduced-motion a11y patterns