Skip to content

animations.md

Latest commit

 

History

History
134 lines (95 loc) · 7.46 KB

animations.md

File metadata and controls

134 lines (95 loc) · 7.46 KB

Animations

Version: 2.2.0 Last Updated: 2026-05-28

Overview

Decoded의 모든 CSS keyframe 애니메이션 카탈로그입니다. JavaScript 기반(GSAP/Motion) 애니메이션은 patterns.md §2를 참조하세요.

관련 문서:

  • patterns.md — 애니메이션 패턴 (Motion, GSAP, Lenis)
  • tokens.md — 시각 토큰
  • 코드 앵커: packages/web/app/globals.css

Easing 함수

Name 값 사용처
ease-out 표준 단방향 reveal (spot-reveal, slide-up, reveal-scan)
ease-in-out 표준 반복 펄스 (hologram-*, spot-glow, spot-float, card-glow, shimmer)
linear 표준 무한 스크롤·플로우 (dash-flow, marquee-c)
cubic-bezier(0.22, 1, 0.36, 1) observe pattern .js-observe 진입/이탈 (opacity/transform 0.34–0.36s)
cubic-bezier(0.16, 1, 0.3, 1) smooth reveal ai-summary-reveal

기본 transition 길이는 300–400ms (observe 패턴 기준). 반복 펄스는 1.5–2.5s.

Keyframe 카탈로그

Keyframe 위치 (globals.css) Duration / Easing 용도 reduce-motion
dash-flow L299 3s linear infinite Fashion Scan SVG connector (stroke-dashoffset 흐름) .fs-connector { animation: none }
hologram-scan L318 2.5s ease-in-out infinite Request flow 홀로그램 수직 스캔 none
hologram-pulse L329 2s ease-in-out infinite 홀로그램 opacity 펄스 none
hologram-glow L339 1.5s ease-in-out infinite 홀로그램 drop-shadow 강도 펄스 none
corner-pulse L351 1s ease-in-out infinite 홀로그램 코너 마커 none
spot-reveal L410 0.4s ease-out forwards Spot 마커 등장 (scale 0→1.3→1) none
reveal-scan L425 1.2s ease-out forwards Spot reveal 수직 스캔 라인 none
spot-glow L444 1.5s ease-in-out infinite Spot 마커 ring + glow 펄스 none
spot-float L458 2.5s ease-in-out infinite Spot 마커 부드러운 호흡 (scale 1→1.08) none
slide-up L487 0.3s ease-out forwards BottomSheet 등장 none
shimmer L503 1.5s ease-in-out infinite Skeleton 로딩 shimmer (skeleton 자체는 유지)
ai-summary-reveal L522 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards AI 요약 카드 blur+slide 진입 none
ai-summary-scan L535 (자유) AI 요약 진입 스캔 라인 none
card-glow L551 2s ease-in-out infinite 카드 선택 강조 glow none
marquee-c L585 30s linear infinite 푸터 'C' 마퀴 횡스크롤 none

옵저버 패턴 (.js-observe): keyframe 없이 transition 기반.

  • 위치: globals.css:242
  • transition: opacity 0.34s, transform 0.36s (cubic-bezier(0.22, 1, 0.36, 1))
  • 트리거: IntersectionObserver → .is-visible / .is-hidden 클래스 토글

prefers-reduced-motion 정책

globals.css에 4개의 @media (prefers-reduced-motion: reduce) 블록이 있습니다:

위치 비활성화 대상
L311 .fs-connector
L400 .animate-hologram-scan, .animate-hologram-pulse, .animate-hologram-glow, .animate-corner-pulse
L476 .animate-spot-reveal, .animate-reveal-scan, .animate-spot-glow, .animate-spot-float, .animate-ai-summary-reveal
L598 .animate-slide-up, .animate-card-glow, .animate-marquee-c

.js-observe는 L278에서 transition: none으로 전환되고, .is-visible/.is-hidden은 L284에서 opacity: 1; transform: none으로 즉시 표시됩니다.

가이드: 새 keyframe 추가 시 동일 파일의 @media (prefers-reduced-motion: reduce) 블록에 utility 클래스를 추가하세요.

사용 예시

1. Spot 마커

<div className="animate-spot-reveal">
  <div className="animate-spot-glow animate-spot-float">
    {/* Spot marker */}
  </div>
</div>

2. Skeleton 로딩

<div className="relative overflow-hidden bg-muted">
  <div className="absolute inset-0 animate-shimmer bg-gradient-to-r from-transparent via-white/30 to-transparent" />
</div>

3. AI 요약 진입

<Card className="animate-ai-summary-reveal">
  <AiSummary />
</Card>

4. 스크롤 등장 (observe pattern)

// IntersectionObserver 훅과 함께 사용
<section className="js-observe">
  <Heading variant="h2">스크롤하면 등장</Heading>
</section>

useIntersectionObserver 훅이 .is-visible 클래스를 토글합니다. 코드 앵커: packages/web/lib/hooks/.

Motion / GSAP

CSS keyframe으로 표현하기 어려운 상호작용은 JS 라이브러리를 사용합니다. 자세한 패턴은 patterns.md §2 참조.

  • Motion (framer-motion): AnimatePresence, layoutId, variants
  • GSAP Flip: 그리드 레이아웃 전환
  • Lenis: smooth scroll inertia

Related

  • patterns.md — JS 애니메이션 패턴
  • tokens.md — Z-index, shadows
  • packages/web/app/globals.css — keyframe 정의