timelabs 0.1.0 → 0.1.1

package/skills/web-design/claude-code/defs/tokens/02-token-scope.md

@@ -0,0 +1,251 @@
+# 토큰 범위 (Token Scope)
+
+
+### 1. Colors (`colors`)
+```yaml
+color:
+  primary: { 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 }
+  secondary: { ... }
+  accent: { ... }
+  background: { DEFAULT, card, elevated }
+  surface: { DEFAULT, hover, active }
+  text: { primary, secondary, disabled, inverse }
+  border: { DEFAULT, strong, subtle }
+  status: { success, warning, error, info }
+```
+
+### 2. Typography (`typography`)
+```yaml
+typography:
+  fontFamily: { sans, serif, mono }
+  fontSize: { xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl }
+  fontWeight: { light, normal, medium, semibold, bold }
+  lineHeight: { tight, normal, relaxed }
+  letterSpacing: { tight, normal, wide }
+```
+
+### 3. Spacing (`spacing`)
+```yaml
+spacing:
+  scale: { 0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64 }
+  # 기본 단위: 4px (1 = 4px, 4 = 16px)
+```
+
+### 4. Border Radius (`radius`)
+```yaml
+borderRadius:
+  none: 0
+  sm: 4px
+  DEFAULT: 8px
+  md: 12px
+  lg: 16px
+  xl: 24px
+  2xl: 32px
+  full: 9999px
+```
+
+### 5. Shadows (`shadows`)
+```yaml
+boxShadow:
+  sm: "0 1px 2px rgba(0,0,0,0.05)"
+  DEFAULT: "0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)"
+  md: "0 4px 6px rgba(0,0,0,0.1)"
+  lg: "0 10px 15px rgba(0,0,0,0.1)"
+  xl: "0 20px 25px rgba(0,0,0,0.1)"
+  2xl: "0 25px 50px rgba(0,0,0,0.25)"
+  inner: "inset 0 2px 4px rgba(0,0,0,0.06)"
+```
+
+### 6. Animations (`animations`)
+
+> 참조: `defs/styles.md`의 **Animation** 필드 + 커스텀 애니메이션 키프레임 레퍼런스
+
+```yaml
+animation:
+  duration: { fast: 150ms, normal: 300ms, slow: 500ms, slower: 800ms }
+  easing:
+    default: ease
+    in: ease-in
+    out: ease-out
+    in-out: ease-in-out
+    spring: "cubic-bezier(0.34, 1.56, 0.64, 1)"    # 탄력 (F, L, N)
+  transition: { all, colors, opacity, transform, shadow }
+  # 스타일별 커스텀 키프레임은 defs/styles.md 하단 레퍼런스 참조
+  keyframes:
+    # 공통
+    fade-up: "opacity 0→1 + translateY 20px→0"
+    fade-in: "opacity 0→1"
+    scale-in: "opacity 0→1 + scale 0.95→1"
+    # 스타일별 (config.style에 따라 선택적 포함)
+    # A,R,V,Z: neon-flicker, neon-blink, twinkle, glitch
+    # E,G,S,W: float, float-gentle, sway, breathe
+    # B,H,O: gradient-flow, shimmer
+    # F,L,N: bounce-in, wiggle, shake
+    # T: flame-flicker
+    # X: gold-sweep
+```
+
+### 6b. Interactions (`interactions`)
+
+> 참조: `defs/styles.md`의 **Hover / Shadow / Border / Decoration / Gradient** 필드
+
+```yaml
+interaction:
+  hover:
+    card: "{style.Hover의 카드 호버 패턴}"           # 스타일별 다름
+    button: "{style.Hover의 버튼 호버 패턴}"         # 스타일별 다름
+    link: "{style.Hover의 링크 호버 패턴}"           # 스타일별 다름
+    row: "{style.Hover의 행 호버 패턴}"              # 스타일별 다름
+  shadow:
+    card: "{style.Shadow의 카드 섀도우}"
+    hover: "{style.Shadow의 호버 섀도우}"
+    dropdown: "shadow-lg"                              # 공통
+    modal: "shadow-xl"                                 # 공통
+  border:
+    default: "{style.Border의 기본 보더}"
+    hover: "{style.Border의 호버 보더}"
+    focus: "ring-2 ring-{primary}-500 ring-offset-2"   # 공통
+  gradient:
+    hero: "{style.Gradient의 히어로 그라데이션}"
+    cta: "{style.Gradient의 CTA 그라데이션}"
+    text: "{style.Gradient의 텍스트 그라데이션}"
+  bgPattern: "{style.BG_Pattern}"                      # 섹션 배경 장식
+  decoration: "{style.Decoration}"                     # 코너, 뱃지, 디바이더
+```
+
+### 7. Breakpoints (`breakpoints`)
+```yaml
+breakpoints:
+  sm: 640px
+  md: 768px
+  lg: 1024px
+  xl: 1280px
+  2xl: 1536px
+```
+
+### 8. Background Images (`backgrounds`)
+
+> 참조: `defs/styles.md`의 **BG_Pattern** 필드, `defs/component-specs.md` 비주얼 variant
+
+```yaml
+background:
+  hero:
+    gradient: "{style.Gradient 히어로}"
+    overlay: "linear-gradient(rgba(bg,0.6), rgba(bg,0.8))"
+    blend-mode: "overlay | multiply | soft-light"
+  card:
+    image-fit: "cover"
+    image-position: "center"
+    overlay-opacity: { default: 0.7, hover: 0.5 }
+  section:
+    pattern: "{style.BG_Pattern}"
+    pattern-opacity: { default: 0.05, accent: 0.1 }
+  cta:
+    gradient: "{style.Gradient CTA}"
+```
+
+### 9. Icon Tokens (`icons`)
+
+> 참조: `defs/icon-usage.md`, `defs/icon-mappings.md`
+
+```yaml
+icon:
+  size:
+    xs: 14px
+    sm: 16px
+    md: 20px
+    lg: 24px
+    xl: 32px
+    2xl: 48px
+    3xl: 64px
+  gap:
+    sm: 4px
+    md: 8px
+    lg: 12px
+    xl: 16px
+  color:
+    default: "currentColor"
+    standalone: "--text-secondary"
+    standalone-hover: "--text-primary"
+    active: "--color-primary"
+    disabled: "--text-disabled"
+    semantic:
+      success: "--color-success"
+      warning: "--color-warning"
+      error: "--color-error"
+      info: "--color-info"
+  stroke-width: 2
+  library: "lucide"
+```
+
+### 10. Visual Interactions (`visual_interactions`)
+
+> 참조: `defs/styles.md`의 **Image Interaction** 필드, `defs/component-specs.md` 인터랙션 패턴
+
+```yaml
+visual_interaction:
+  image:
+    zoom: { scale: 1.05, duration: 0.4s, easing: ease-out }
+    reveal: { opacity: "0.3→1", duration: 0.5s }
+    parallax: { speed: 0.5, direction: vertical }
+    overlay-fade: { opacity: "0.7→0.4", duration: 0.3s }
+    ken-burns: { scale: "1→1.1", duration: 15s }
+    blur-to-clear: { blur: "8px→0", duration: 0.6s }
+  element:
+    tilt-3d: { max-deg: 8, perspective: 1000px }
+    float: { distance: 10px, duration: 3s }
+    morph: { scale: 1.05, rotate: 5deg, duration: 0.3s }
+  text:
+    gradient-text: "background-clip: text"
+    typewriter: { speed: 50ms, cursor: true }
+    count-up: { duration: 2s, easing: ease-out }
+  scroll:
+    fade-up: { distance: 30px, duration: 0.6s }
+    stagger: { delay: 0.1s, direction: top-to-bottom }
+    reveal: { threshold: 0.2 }
+```
+
+### 11. Section Dividers (`dividers`)
+
+> 참조: `defs/styles.md`의 **Section Divider** 필드
+
+```yaml
+divider:
+  style:
+    line: { height: 1px, color: "--border-default" }
+    gradient-line: { height: 2px, gradient: "{style.Gradient}" }
+    wave-svg: { height: 40~80px, fill: "--bg-secondary" }
+    angle: { deg: 3~5, fill: "--bg-secondary" }
+    dots: { size: 4px, gap: 16px, color: "--border-default", opacity: 0.3 }
+  spacing:
+    before: "--space-12"
+    after: "--space-12"
+```
+
+### 12. Illustration Tokens (`illustrations`)
+
+> 참조: `defs/illustration-guide.md`
+
+```yaml
+illustration:
+  color-sync:
+    primary: "--color-primary"
+    accent: "--color-accent"
+    bg: "--color-surface-alt"
+    muted: "--text-disabled"
+  size:
+    inline: 80~120px
+    card: 100~150px
+    page: 200~300px
+    hero: 300~500px
+    onboarding: 250~350px
+  responsive-scale:
+    desktop: 1.0
+    tablet: 0.8
+    mobile: 0.6
+  dark-mode:
+    filter: "brightness(0.9) saturate(0.9)"
+```
+
+---
+

package/skills/web-design/claude-code/defs/tokens.md

@@ -0,0 +1,24 @@
+# 3DS 토큰 정의
+
+> 참조: `stages/stage2-*.md` (토큰 형식), `stages/stage3-design.md` Q3-3 (토큰 범위)
+> Dependencies: 없음 (독립 참조 데이터)
+
+## 토큰 형식 (Token Format)
+
+> 상세: `defs/tokens/01-token-format.md` 참조
+
+- **용도**: 웹 프로젝트 (Tailwind CSS 사용 시)
+## 토큰 범위 (Token Scope)
+
+> 상세: `defs/tokens/02-token-scope.md` 참조
+
+color:
+## 플랫폼별 권장 형식
+
+| 프로젝트 유형 | 권장 형식 | 이유 |
+|-------------|----------|------|
+| 웹 (Tailwind) | `tailwind` | 즉시 적용 |
+| 웹 (일반) | `css_variables` | 런타임 테마 전환 |
+| PC앱 (Electron/Tauri) | `css_variables` | 웹 기술 기반 |
+| 모바일 앱 | `style_dictionary` | 멀티 플랫폼 변환 |
+| 혼합 | `style_dictionary` | 단일 소스 멀티 타겟 |

package/skills/web-design/claude-code/defs/video-compositions/01-composition-single.md

@@ -0,0 +1,66 @@
+# 1. 단일 컴포지션 (Single)
+
+
+하나의 메인 컴포지션으로 구성. 숏폼/광고/프레젠테이션에 적합.
+
+```tsx
+// src/Root.tsx
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      <Composition
+        id="Main"
+        component={Main}
+        durationInFrames={30 * 30} // 30초 @ 30fps
+        fps={30}
+        width={1920}
+        height={1080}
+      />
+    </>
+  );
+};
+```
+
+### 구조
+
+```
+src/
+├── Root.tsx                    # 단일 Composition 등록
+├── compositions/
+│   └── Main/
+│       ├── index.tsx           # re-export
+│       ├── Main.tsx            # 메인 컴포지션 (Sequence 구성)
+│       └── schema.ts           # z.object() InputProps 스키마
+├── components/                 # 재사용 컴포넌트
+│   ├── AnimatedText.tsx
+│   ├── FadeIn.tsx
+│   └── SlideIn.tsx
+└── lib/                        # 유틸리티
+    ├── animations.ts           # interpolate/spring 헬퍼
+    ├── colors.ts               # 디자인 토큰 색상
+    └── fonts.ts                # 폰트 로딩
+```
+
+### Sequence 패턴
+
+```tsx
+// compositions/Main/Main.tsx
+export const Main: React.FC = () => {
+  return (
+    <AbsoluteFill style={{ backgroundColor: colors.background }}>
+      <Sequence from={0} durationInFrames={90} name="Intro">
+        <Intro />
+      </Sequence>
+      <Sequence from={90} durationInFrames={150} name="Content">
+        <Content />
+      </Sequence>
+      <Sequence from={240} durationInFrames={60} name="Outro">
+        <Outro />
+      </Sequence>
+    </AbsoluteFill>
+  );
+};
+```
+
+---
+

package/skills/web-design/claude-code/defs/video-compositions/02-composition-multi.md

@@ -0,0 +1,66 @@
+# 2. 다중 컴포지션 (Multi)
+
+
+여러 독립 컴포지션을 병렬 등록. 시리즈/에피소드/다중 출력에 적합.
+
+```tsx
+// src/Root.tsx
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      <Composition id="Intro" component={Intro} ... />
+      <Composition id="Episode1" component={Episode1} ... />
+      <Composition id="Episode2" component={Episode2} ... />
+      <Composition id="Outro" component={Outro} ... />
+      <Composition id="Thumbnail" component={Thumbnail}
+        width={1280} height={720} durationInFrames={1} fps={1} />
+    </>
+  );
+};
+```
+
+### 구조
+
+```
+src/
+├── Root.tsx                    # 여러 Composition 등록
+├── compositions/
+│   ├── Intro/
+│   │   ├── index.tsx
+│   │   ├── Intro.tsx
+│   │   └── schema.ts
+│   ├── Episode1/
+│   │   ├── index.tsx
+│   │   ├── Episode1.tsx
+│   │   └── schema.ts
+│   ├── Episode2/
+│   │   ├── index.tsx
+│   │   ├── Episode2.tsx
+│   │   └── schema.ts
+│   ├── Outro/
+│   │   ├── index.tsx
+│   │   ├── Outro.tsx
+│   │   └── schema.ts
+│   └── Thumbnail/
+│       ├── index.tsx
+│       └── Thumbnail.tsx
+├── components/                 # 공유 컴포넌트
+└── lib/                        # 공유 유틸리티
+```
+
+### Folder 그룹핑
+
+```tsx
+// 폴더로 컴포지션 그룹핑
+<Folder name="Episodes">
+  <Composition id="Episode1" ... />
+  <Composition id="Episode2" ... />
+</Folder>
+<Folder name="Assets">
+  <Composition id="Thumbnail" ... />
+  <Composition id="EndCard" ... />
+</Folder>
+```
+
+---
+

package/skills/web-design/claude-code/defs/video-compositions/03-composition-parametric.md

@@ -0,0 +1,81 @@
+# 3. 파라메트릭 컴포지션 (Parametric)
+
+
+InputProps + calculateMetadata로 동적 비디오 생성. 템플릿/데이터 드리븐에 적합.
+
+```tsx
+// src/Root.tsx
+export const RemotionRoot: React.FC = () => {
+  return (
+    <>
+      <Composition
+        id="DynamicVideo"
+        component={DynamicVideo}
+        durationInFrames={30 * 30}
+        fps={30}
+        width={1920}
+        height={1080}
+        schema={dynamicVideoSchema}
+        defaultProps={{
+          title: "Sample Title",
+          subtitle: "Sample Subtitle",
+          bgColor: "#000000",
+          items: [],
+        }}
+        calculateMetadata={calculateDynamicMetadata}
+      />
+    </>
+  );
+};
+```
+
+### 구조
+
+```
+src/
+├── Root.tsx                    # calculateMetadata 사용
+├── compositions/
+│   └── DynamicVideo/
+│       ├── index.tsx
+│       ├── DynamicVideo.tsx    # props 기반 렌더링
+│       ├── schema.ts           # z.object() 상세 스키마
+│       └── metadata.ts         # calculateMetadata 함수
+├── components/                 # 파라미터별 렌더 컴포넌트
+│   ├── DynamicTitle.tsx
+│   ├── DynamicBackground.tsx
+│   └── DataDrivenChart.tsx
+├── lib/
+│   ├── animations.ts
+│   ├── colors.ts
+│   └── data-fetcher.ts         # 외부 데이터 페칭
+└── types/
+    └── props.ts                # InputProps 타입 정의
+```
+
+### calculateMetadata 패턴
+
+```tsx
+// compositions/DynamicVideo/metadata.ts
+import type { CalculateMetadataFunction } from "remotion";
+import type { DynamicVideoProps } from "./schema";
+
+export const calculateDynamicMetadata: CalculateMetadataFunction<
+  DynamicVideoProps
+> = async ({ props }) => {
+  // 외부 데이터에 따라 duration 동적 계산
+  const items = await fetchItems(props.dataSource);
+  const durationPerItem = 90; // 3초 @ 30fps
+  const totalDuration = items.length * durationPerItem + 120; // +인트로/아웃트로
+
+  return {
+    durationInFrames: totalDuration,
+    props: {
+      ...props,
+      items,
+    },
+  };
+};
+```
+
+---
+

package/skills/web-design/claude-code/defs/video-compositions.md

@@ -0,0 +1,37 @@
+# 비디오 컴포지션 구조 패턴
+
+> 참조: `stages/stage2-video.md` Q2-5에서 사용
+> Dependencies: `defs/conventions/remotion.md`
+
+## 개요
+
+Remotion 프로젝트의 컴포지션 구조 패턴을 정의합니다.
+웹 프로젝트의 `web-layouts.md`에 대응하는 비디오 버전입니다.
+
+---
+
+## 1. 단일 컴포지션 (Single)
+
+> 상세: `defs/video-compositions/01-composition-single.md` 참조
+
+하나의 메인 컴포지션으로 구성. 숏폼/광고/프레젠테이션에 적합.
+## 2. 다중 컴포지션 (Multi)
+
+> 상세: `defs/video-compositions/02-composition-multi.md` 참조
+
+여러 독립 컴포지션을 병렬 등록. 시리즈/에피소드/다중 출력에 적합.
+## 3. 파라메트릭 컴포지션 (Parametric)
+
+> 상세: `defs/video-compositions/03-composition-parametric.md` 참조
+
+InputProps + calculateMetadata로 동적 비디오 생성. 템플릿/데이터 드리븐에 적합.
+## video_type별 추천 구조
+
+| video_type | 추천 구조 | 이유 |
+|------------|----------|------|
+| short_form | single | 60초 미만, 단일 흐름 |
+| long_form | multi | 섹션별 독립 편집 |
+| data_viz | parametric | 데이터 기반 동적 생성 |
+| template | parametric | InputProps 커스터마이징 |
+| video_saas | multi + parametric | 다양한 출력 + 사용자 파라미터 |
+| interactive | single / parametric | Player 실시간 파라미터 |

package/skills/web-design/claude-code/defs/video-motions/01-animation-basic.md

@@ -0,0 +1,49 @@
+# 1. 기본 애니메이션 (interpolate)
+
+
+### Fade In
+
+```tsx
+const frame = useCurrentFrame();
+const opacity = interpolate(frame, [0, 30], [0, 1], {
+  extrapolateRight: "clamp",
+});
+return <div style={{ opacity }}>{children}</div>;
+```
+
+### Slide In (Left → Right)
+
+```tsx
+const frame = useCurrentFrame();
+const translateX = interpolate(frame, [0, 30], [-100, 0], {
+  extrapolateRight: "clamp",
+  easing: Easing.out(Easing.cubic),
+});
+return <div style={{ transform: `translateX(${translateX}%)` }}>{children}</div>;
+```
+
+### Scale In
+
+```tsx
+const frame = useCurrentFrame();
+const scale = interpolate(frame, [0, 20], [0.8, 1], {
+  extrapolateRight: "clamp",
+  easing: Easing.out(Easing.back(1.5)),
+});
+return <div style={{ transform: `scale(${scale})` }}>{children}</div>;
+```
+
+### Typewriter
+
+```tsx
+const frame = useCurrentFrame();
+const charCount = Math.floor(
+  interpolate(frame, [0, text.length * 3], [0, text.length], {
+    extrapolateRight: "clamp",
+  })
+);
+return <span>{text.slice(0, charCount)}</span>;
+```
+
+---
+

package/skills/web-design/claude-code/defs/video-motions/02-animation.md

@@ -0,0 +1,52 @@
+# 2. 스프링 애니메이션 (spring)
+
+
+### Bounce In
+
+```tsx
+const frame = useCurrentFrame();
+const { fps } = useVideoConfig();
+const scale = spring({
+  frame,
+  fps,
+  config: { damping: 10, stiffness: 100, mass: 0.5 },
+});
+return <div style={{ transform: `scale(${scale})` }}>{children}</div>;
+```
+
+### Elastic Slide
+
+```tsx
+const frame = useCurrentFrame();
+const { fps } = useVideoConfig();
+const translateY = spring({
+  frame,
+  fps,
+  config: { damping: 12, stiffness: 80, mass: 1 },
+  from: 50,
+  to: 0,
+});
+return <div style={{ transform: `translateY(${translateY}px)` }}>{children}</div>;
+```
+
+### Pop In (아이콘/뱃지)
+
+```tsx
+const frame = useCurrentFrame();
+const { fps } = useVideoConfig();
+const progress = spring({
+  frame,
+  fps,
+  config: { damping: 8, stiffness: 200, mass: 0.3 },
+});
+const scale = interpolate(progress, [0, 1], [0, 1]);
+const rotate = interpolate(progress, [0, 1], [-180, 0]);
+return (
+  <div style={{ transform: `scale(${scale}) rotate(${rotate}deg)` }}>
+    {children}
+  </div>
+);
+```
+
+---
+

package/skills/web-design/claude-code/defs/video-motions/03-reference.md

@@ -0,0 +1,17 @@
+# 3. Easing 함수 레퍼런스
+
+
+| 이름 | 함수 | 용도 |
+|------|------|------|
+| Linear | `Easing.linear` | 균일한 움직임 |
+| Ease In | `Easing.in(Easing.cubic)` | 시작 느리게 |
+| Ease Out | `Easing.out(Easing.cubic)` | 끝 느리게 (가장 자연스러움) |
+| Ease In-Out | `Easing.inOut(Easing.cubic)` | 시작/끝 느리게 |
+| Back | `Easing.out(Easing.back(1.5))` | 살짝 넘어갔다 돌아옴 |
+| Elastic | `Easing.out(Easing.elastic(1))` | 탄성 효과 |
+| Bounce | `Easing.out(Easing.bounce)` | 바운스 |
+| Circle | `Easing.out(Easing.circle)` | 원형 가감속 |
+| Bezier | `Easing.bezier(0.25, 0.1, 0.25, 1)` | 커스텀 곡선 |
+
+---
+