animate

사용 방법

설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.

npx skills add https://github.com/delphi-ai/animate-skill --skill animate

시작 전 확인

설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.

원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

Next.js Animations

Overview

This skill provides comprehensive guidance for implementing smooth, performant, and accessible animations in Next.js and React applications. It covers CSS animations, Framer Motion, easing principles, and accessibility considerations.

Quick Reference

Easing Cheat Sheet

Animation Type	Easing	Duration
Element entering	`ease-out`	200-300ms
Element moving on screen	`ease-in-out`	200-300ms
Element exiting	`ease-in`	150-200ms
Hover effects	`ease`	150ms
Opacity only	`linear`	varies

CSS Custom Properties (Recommended)

css

:root {
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
}

Common Animation Patterns

1. Hover Lift Effect

css

.card {
  transition: transform 200ms var(--ease-out-quint),
              box-shadow 200ms var(--ease-out-quint);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

2. Button Press

css

.button {
  transition: transform 100ms ease-out;
}
.button:active {
  transform: scale(0.97);
}

3. Fade In on Mount (Framer Motion)

tsx

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3, ease: [.23, 1, .32, 1] }}
>
  Content
</motion.div>

4. Modal with Exit Animation

tsx

<AnimatePresence>
  {isOpen && (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.2, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  )}
</AnimatePresence>

5. Tab Indicator (Shared Layout)

tsx

{tabs.map(tab => (
  <button key={tab} onClick={() => setActive(tab)} className="relative px-4 py-2">
    {tab}
    {active === tab && (
      <motion.div
        layoutId="tab-indicator"
        className="absolute inset-0 bg-blue-500 rounded -z-10"
        transition={{ type: "spring", stiffness: 400, damping: 30 }}
      />
    )}
  </button>
))}

6. Staggered List Animation

tsx

const container = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

<motion.ul variants={container} initial="hidden" animate="visible">
  {items.map(i => <motion.li key={i} variants={item}>{i}</motion.li>)}
</motion.ul>

Golden Rules

Exits faster than enters: Exit animations should be ~75% of enter duration
Only animate transform and opacity: These are GPU-accelerated
200-300ms is the sweet spot: Most animations should be in this range
Always respect prefers-reduced-motion: See accessibility section in references
Use springs for interruptible animations: Better UX when users interrupt

Examples

Complete working examples from the course are in the examples/ directory:

Example	Description	Key Techniques
`card-hover.tsx`	Slide-up description on hover	CSS transitions, transform, opacity
`toast-stacking.tsx`	Animated toast notifications	CSS custom properties, data-* triggers
`text-reveal.tsx`	Staggered letter animation	@keyframes, animation-delay, calc()
`shared-layout.tsx`	Element position/size morph	Framer Motion layoutId
`animate-height.tsx`	Smooth height changes	useMeasure, animate height
`multi-step-flow.tsx`	Directional step wizard	AnimatePresence, custom variants
`feedback-popover.tsx`	Button-to-popover expansion	Nested layoutId, form states
`app-store-card.tsx`	iOS-style card expansion	Multiple layoutId elements

To use an example, read it with: Read examples/<name>.tsx

References

For detailed documentation, read the reference files:

references/easing-and-timing.md - Easing functions, timing guidelines, spring configuration
references/css-animations.md - Transforms, transitions, keyframes, clip-path
references/framer-motion.md - Motion components, AnimatePresence, variants, layout animations, hooks
references/performance-accessibility.md - 60fps optimization, prefers-reduced-motion, accessibility

When to Use What

Scenario	Recommended Approach
Simple hover effects	CSS transitions
Enter/exit animations	Framer Motion + AnimatePresence
Layout changes	Framer Motion `layout` prop
Shared element transitions	Framer Motion `layoutId`
Scroll-linked animations	Framer Motion `useScroll`
Complex orchestrated animations	Framer Motion variants
Drag interactions	Framer Motion drag gestures
Performance-critical	CSS-only with transforms

Dependencies

For Framer Motion examples, install:

bash

pnpm add framer-motion react-use-measure usehooks-ts