snapcn은(는) 무엇을 하나요?
Remotion 비디오를 위한 복사-붙여넣기 컴포넌트입니다. shadcn을 통해 설치되며 components/snap-cn/ 디렉토리에 배치됩니다. 모든 코드는 사용자가 소유합니다.
설치
필수 조건: Remotion 프로젝트 (npx create-video@latest).
# 컴포넌트 추가 (네임스페이스가 적용된 shadcn 레지스트리)
shadcn add @snapcn/text-reveal
# 컴포넌트는 components/snap-cn/text-reveal.tsx에 배치됩니다.
@snapcn/<이름>이 정식 네임스페이스 형식입니다. registries 항목이 필요 없습니다. 네임스페이스는 shadcn 레지스트리 디렉토리에 포함되어 있습니다. 일반 레지스트리 URL https://snapcn.dev/r/<이름>.json도 작동합니다.
의존성 자동 설치
많은 컴포넌트가 registryDependencies를 통해 다른 컴포넌트를 가져옵니다. shadcn이 이를 전이적으로 설치합니다. 예를 들어, shadcn add @snapcn/search-typing은 @snapcn/snap-cn-ui, @snapcn/input 및 @snapcn/caret도 함께 가져옵니다.
- **
@snapcn/snap-cn-ui**는 공유 코어 라이브러리입니다 (타임라인-폴드 훅, 테마 컨텍스트, 색상 수학). 대부분의 UI 프리미티브가 이것에 의존합니다. 직접 설치하는 경우는 거의 없습니다.
두 가지 계층
snapcn에는 두 가지 종류의 컴포넌트가 있으며, API가 다릅니다:
- 애니메이션 계층 (
snapcn) — 텍스트 애니메이션, 전환, 배경, UI 블록 시뮬레이션, 브랜드/소셜 카드, 전체 컴포지션. 프레임 기반. 공유 props:speed(시간 배수), 텍스트의 경우fontSize,color,fontWeight. - UI 프리미티브 (
snap-cn-ui) — 타임라인 기반의 shadcn 스타일 프리미티브. 현재 두 가지 제공:input과caret. 상태 기반 props (state,style,size,theme) — 열림/입력 상태는 타임라인의 순수 함수입니다.speedprop 없음.@snapcn/snap-cn-ui를 기반으로 구축됨.
컴포넌트 카테고리
빌드하려는 대상에 따라 선택하세요. 카탈로그는 references/components/ 아래에 컴포넌트당 하나의 파일로 분할되어 있습니다. references/components/index.md에서 시작하세요. — 카테고리별로 그룹화된 라우터 테이블로, 각 컴포넌트에 '사용 용도'/'사용하지 말아야 할 경우' 신호가 포함되어 있습니다. 훑어보고 후보를 선택한 다음, 필요한 references/components/<이름>.md 파일만 열어보세요 (전체 props, 예시, 모든 사용/사용 금지 참고 사항). 모든 파일을 읽지 마세요.
| 카테고리 | 계층 | 컴포넌트 |
|---|---|---|
| 텍스트 및 제목 | snapcn | text-reveal, text-swell, text-highlight, text-swap, text-build, word-flip |
| 캡션 | snapcn | word-captions, karaoke-captions |
| AI 채팅 입력 | snapcn | search-typing, prompt-zoom, answer-stream |
| 화면 및 기기 | snapcn | phone-frame, laptop-frame, terminal-simulator |
| 로고 | snapcn | logo-assemble, logo-flicker, block-wordmark |
| 장면 | snapcn | announce-title, hero-launch, orbit-gallery, moodboard-reveal, status-cycle |
| 소셜 증명 | snapcn | follower-rush |
| 효과 | snapcn | pulsing-border |
| UI 프리미티브 | snap-cn-ui | input, caret (+ 공유 코어 라이브러리 snap-cn-ui) |
이것이 전체 레지스트리입니다 — 27개 항목. 셰이더, 독립형 전환 컴포넌트, 차트 또는 소셜 카드 컴포넌트, input과 caret 외의 shadcn 프리미티브는 없습니다. 장면에 필요한 경우 직접 빌드하세요 (references/anatomy.md §1) — 이 테이블에 없는 이름에 대해 shadcn add를 실행하지 마세요. references/components/index.md는 더 이상 설치되지 않는 이전 이름을 매핑합니다.
컴포넌트 패턴
계층에 따라 규칙이 다릅니다. 프리미티브에 애니메이션 계층 props가 있다고 가정하지 마세요.
애니메이션 계층 (snapcn)
- 컴포넌트별로 명명된
Props인터페이스 (예:TextRevealProps). speed?: number— 전역 시간 배수 (기본값1),frame * speed로 적용됨.- 텍스트 컴포넌트:
fontSize,color,fontWeight. - 장면 간 전환은 이 레지스트리에 포함되어 있지 않습니다 — Remotion 자체
@remotion/transitions(slide,wipe,fade,flip)를<TransitionSeries>내부에서 사용하세요. - 루트에
className?: string.
UI 프리미티브 (snap-cn-ui)
- 상태 기반이며,
speed기반이 아닙니다:state(예:"open"/"closed"),style,variant,size,theme?: Partial<SnapCnTheme>. - 열림/닫힘/활성 상태는 타임라인의 순수 함수입니다 (키프레임 프리셋).
- 트리거 요소와 함께 모달-레이어 프리미티브 (dialog, alert-dialog, drawer)를 구성하세요. 각 컴포넌트의 예시를 참조하세요.
애니메이션 API
import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
const scale = spring({ fps, frame, config: { damping: 12, mass: 1, stiffness: 100 } });
// 결정론적 난수 (절대 Math.random() 사용 금지)
import { random } from "@remotion/random";
const jitter = random(`seed-${frame}`);
컴포지션 구조
import { Sequence, Series } from "remotion";
<Sequence from={30} durationInFrames={60}>
<TextReveal text="Ship it in React" />
</Sequence>
<Series>
<Series.Sequence durationInFrames={60}><SceneA /></Series.Sequence>
<Series.Sequence durationInFrames={60}><SceneB /></Series.Sequence>
</Series>
캔버스 및 타이밍
- 캔버스 표준:
1280×720 @ 30fps. 컴포넌트는 이에 맞춰 배치됩니다. - 각 Sequence의 예산을 컴포넌트의 자연스러운 길이에 맞추세요 —
components/index.md의 '길이' 열 (및 각 파일의 '자연 길이')를 참조하세요. 예산이 부족하면 애니메이션이 잘리고, 초과하면 빈 시간이 발생합니다. - 분위기 일치: 각 카탈로그 항목에는
vibe태그 (tech/premium/data/clean/playful/social)가 있습니다. 브랜드 분위기에 맞는 컴포넌트를 선택하세요. - 팔레트 및 글꼴: 라이브러리의 토큰 범위 내에서 유지하세요 (
references/design.md→ 토큰). 그래야 직접 추가한 요소가 충돌하지 않습니다.
디자인 기본값 — AI-슬롭 방지
직접 텍스트, 장면 크롬 또는 카드를 작성할 때 (사전 제작된 컴포넌트가 아닌 경우), 절제를 유지하세요:
- 직접 추가하는 본문/제목 텍스트에 장식용
letter-spacing를 사용하지 마세요. text-transform: uppercase/ 전체 대문자 기본값을 사용하지 마세요. — 문장 케이스 (시작,시작이 아닌LAUNCH)를 선호하세요.- 그라데이션 텍스트 채우기 또는 장식용 그라데이션 워시를 사용하지 마세요. — 그라데이션은 의도된 배경으로만 사용하세요.
- 광택 / 유색 드롭 섀도우 또는 큰 블러 반경 (
blur > ~24px, 확산, 다중 레이어)을 사용하지 마세요. — 미묘한 1px 양각만 허용.
예외: 효과 자체가 본질인 컴포넌트에서는 이러한 규칙을 절대 적용하지 마세요. — word-flip의 그라데이션 단어, block-wordmark의 색상 데크, announce-title의 광택, pulsing-border 자체, 그리고 캡션 프리셋의 두꺼운 외곽선은 모두 적법합니다. 규칙은 여러분의 추가를 제어하는 것이지 라이브러리를 제어하는 것이 아닙니다.
전체 예/아니오 예시: references/design.md. 모션 품질 (타이밍, 예고, 스테이징, 이징)은 references/motion-principles.md를 참조하세요.
주의사항 (snapcn 전용)
- 전환 컴포넌트는 제공되지 않습니다 — 장면 변경은
@remotion/transitions의<TransitionSeries.Transition>이며, snapcn 컴포넌트가 아닙니다.text-swap은 한 줄을 교체하는 것이지 장면을 교체하는 것이 아닙니다. - 터미널 스크롤은 즉시 이루어집니다 — 스텝 함수
translateY, 스크롤에 절대 spring/ease를 사용하지 마세요. - 분할 레이아웃에서
overflow: hidden— 너비 애니메이션 중 콘텐츠가 깨지는 것을 방지합니다. - 커서 깜빡임은 결정론적입니다 —
Math.floor(frame / 15) % 2 === 0, 인터벌이 아닙니다. - 정적 파일은
public/에 배치합니다 —staticFile('cursor.svg')로 로드하며, import를 사용하지 마세요. - 소셜 카드는 오프라인으로 렌더링됩니다 —
avatarUrl=""/coverUrl=""은 그라데이션으로 대체됩니다. fetch를 사용하지 마세요.
일반 Remotion 규칙 (Math.random() 사용 금지, setInterval 사용 금지, top/left 대신 transform 애니메이션, 렌더링 전 글꼴 로드)은 Remotion 자체 스킬에 있으며, 이 스킬에 포함되지 않습니다:
npx skills add remotion-dev/skills.
비디오 구성하기
컴포넌트를 덤프하지 말고 하나의 이야기를 구성하세요. 전체 비디오를 제작하라는 요청을 받으면 ("제품 데모 만들기", "변경 로그 비디오", "랜딩 페이지 소개"):
- 전략을 결정하세요 — 기성 템플릿 vs 컴포넌트 조합 vs 새 컴포넌트 제작.
references/anatomy.md§1을 참조하세요. - 비트를 따르세요 — 제품 데모는 Hook → Positioning → 제품 공개 → 기능 → 증명 → CTA (마지막 두 개는 선택 사항)입니다.
references/anatomy.md§2를 참조하세요. - 레시피를 사용하세요 —
references/archetypes/index.md는 아키타입별 제작으로 라우팅됩니다: 콘텐츠 계약 (추론 → 요청 → 플레이스홀더), 기간 변형, 비트→컴포넌트 슬롯, 작업된<TransitionSeries>스켈레톤. - 각 비트의 컴포넌트를
references/components/index.md에서 선택하세요.vibe태그를 브랜드에 맞추고 각<Sequence durationInFrames>의 예산을 자연 길이에 맞게 조정하세요. - 품질 기준을 확인하세요 — 하나의 악센트, 문장 케이스 역동적 타이포그래피, 실제 콘텐츠, 광택 후광 없음, 기능 목록 열거 없음, 타이포그래피 뒤 장식용 그라데이션 워시 없음.
references/anatomy.md§3을 참조하세요.
참조
references/anatomy.md— 전체 비디오 구성: 전략 (템플릿/조합/신규), 제품 데모 비트, 좋은 코드 vs 슬롭 품질 기준.references/archetypes/index.md— 아키타입별 제작 레시피 (제품 데모 플래그십 + 변경 로그, 기능 발표, OSS 쇼케이스, CLI 도구 데모, 사용후기 릴, 연례 리뷰, 가격 공개, 로고 범퍼) 라우터: 콘텐츠 계약, 기간 변형, 비트→슬롯 맵.references/components/index.md— 라우터 테이블 (모든 컴포넌트, 카테고리별 그룹화, '사용 용도'/'사용하지 말아야 할 경우' 포함). 단일 컴포넌트의 전체 props, 예시 및 사용/사용 금지 참고 사항을 보려면references/components/<이름>.md를 여세요.references/design.md— 안티-슬롭 디자인 기본값 (예/아니오) + 디자인 토큰 (팔레트, 글꼴, 캔버스).references/motion-principles.md— snapcn + Remotion에 적용된 모션 디자인 원칙.references/anti-patterns.md— 일반적인 생성 실수와 그 해결책.