snapcn은(는) 무엇을 하나요?
Remotion 비디오를 위한 복사-붙여넣기 컴포넌트입니다. shadcn을 통해 컴포넌트를 설치하면 components/snap-cn/ 디렉토리에 저장되며, 코드를 완전히 소유하게 됩니다.
설치
전제 조건: Remotion 프로젝트 (npx create-video@latest).
# 원하는 컴포넌트 추가 (네임스페이스가 있는 shadcn 레지스트리)
shadcn add @snapcn/text-reveal
# 컴포넌트는 components/snap-cn/text-reveal.tsx에 설치됩니다
@snapcn/<name>은 표준 네임스페이스 형식입니다. registries 항목을 따로 추가할 필요가 없습니다. 네임스페이스는 이미 shadcn 레지스트리 디렉토리에 포함되어 있습니다. 일반 레지스트리 URL https://snapcn.dev/r/<name>.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/<name>.md 파일만 열어보세요 (전체 props, 예제, 모든 사용/사용 금지 노트). 모든 파일을 읽지 마세요.
| 카테고리 | 계층 | 컴포넌트 |
|---|---|---|
| 텍스트 및 제목 | snapcn | text-reveal, type-morph, text-swell, text-highlight, text-swap, text-build, text-rewrite, text-select, word-flip, punch-lines, word-gather, word-wheel |
| 캡션 | snapcn | word-captions, karaoke-captions |
| AI 채팅 입력 | snapcn | prompt-send, search-typing, prompt-zoom, answer-stream, answer-highlight, agent-steps |
| 화면 및 기기 | snapcn | phone-frame, laptop-frame, terminal-simulator, screen-recording, cursor-track |
| 로고 | snapcn | logo-assemble, logo-flicker, logo-collapse, logo-drift, block-wordmark, wordmark-cut |
| 장면 | snapcn | announce-title, hero-launch, orbit-gallery, moodboard-reveal, status-cycle, count-grid, roster-grant, orb-swarm, reel-collage, card-rail |
| 사회적 증명 | snapcn | follower-rush, channel-thread |
| 효과 | snapcn | pulsing-border |
| UI 프리미티브 | snap-cn-ui | input, caret (+ snap-cn-ui, 공유 코어 라이브러리) |
이것이 전체 무료 레지스트리입니다 — 47개 항목 (실시간 목록은 항상 https://snapcn.dev/llms.txt?ref=skill-snapcn; 50개는 Pro이며 아래 참조). 셰이더, 독립형 전환 컴포넌트, 차트 또는 소셜 카드 컴포넌트, 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의Length열 (및 각 파일의Natural length)을 참조하세요. 예산을 적게 잡으면 애니메이션이 잘리고, 많이 잡으면 빈 시간이 생깁니다. - 톤 매칭: 각 카탈로그 항목에는
vibe태그 (tech/premium/data/clean/playful/social)가 있습니다. 브랜드에 맞는 vibe의 컴포넌트를 선택하세요. - 팔레트 및 폰트: 라이브러리의 토큰을 사용하세요 (
references/design.md→ tokens). 그래야 사용자가 추가한 요소들이 충돌하지 않습니다.
디자인 기본값 — AI 슬롭 피하기
자체 텍스트, 장면 크롬 또는 카드 (사전 제작된 컴포넌트가 아닌 경우)를 작성할 때는 절제를 유지하세요:
- 추가하는 본문/제목 텍스트에 장식용
letter-spacing을 사용하지 마세요. text-transform: uppercase/ 모두 대문자 기본값을 사용하지 마세요 — 문장 형식 (LAUNCH가 아닌Launch)을 선호하세요.- 그라디언트 텍스트 채우기 또는 장식용 그라디언트 워시를 사용하지 마세요 — 그라디언트는 의도적인 배경에만 사용하세요.
- 글로우 / 컬러 드롭 섀도우 또는 큰 블러 반경 (
blur > ~24px, spread, multi-layer)을 사용하지 마세요 — 미묘한 1px elevation만 사용하세요.
예외: 효과가 본질인 컴포넌트에서는 이것들을 제거하지 마세요 — word-flip의 그라디언트 단어, block-wordmark의 컬러 덱, announce-title의 글로우, pulsing-border 자체, 그리고 캡션 프리셋의 굵은 윤곽선은 모두 정당합니다. 이 규칙은 여러분이 추가하는 요소에 적용되며, 라이브러리에는 적용되지 않습니다.
전체 사용/사용 금지 예제: references/design.md. 모션 품질 (타이밍, 예측, 스테이징, 이징)에 대해서는 references/motion-principles.md를 참조하세요.
주의사항 (snapcn 특화)
- 전환 컴포넌트는 제공되지 않습니다 — 장면 변경은 snapcn 컴포넌트가 아닌
@remotion/transitions의<TransitionSeries.Transition>을 사용하세요.text-swap은 한 줄을 교체하는 것이지 장면을 교체하는 것이 아닙니다. - 터미널 스크롤은 즉시 — step-function
translateY, 절대 spring/ease로 스크롤하지 마세요. - 분할 레이아웃에
overflow: hidden— 너비 애니메이션 중 콘텐츠 깨짐을 방지합니다. - 커서 깜빡임은 결정론적 —
Math.floor(frame / 15) % 2 === 0, 인터벌을 사용하지 마세요. - 정적 파일은
public/에 배치 — 가져오기가 아닌staticFile('cursor.svg')로 로드하세요. - 소셜 카드는 오프라인에서 렌더링 —
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 → Product reveal → Features → Proof → CTA (마지막 두 개는 선택 사항).
references/anatomy.md§2 참조. - 레시피 사용 —
references/archetypes/index.md는 아키타입별 빌드로 연결됩니다: 콘텐츠 계약 (추론 → 질문 → 플레이스홀더), 길이 변형, 비트→컴포넌트 슬롯, 그리고 작업된<TransitionSeries>스켈레톤. - 각 비트의 컴포넌트를
references/components/index.md에서 선택;vibe태그를 브랜드와 일치시키고 각<Sequence durationInFrames>의 예산을 자연 길이에 맞게 책정하세요. - 품질 기준 확인 — 하나의 악센트, 문장형 키네틱 타입, 실제 콘텐츠, 글로우 헤일로 없음, 기능 목록 열거 없음, 타입 뒤에 장식용 그라디언트 워시 없음.
references/anatomy.md§3 참조.
워크플로우
전체 비디오를 위해 작업에 맞는 워크플로우 스킬을 설치하세요. 각각은 비트별로 컴포넌트를 구성하여 타입 검사 및 렌더링이 가능한 작곡을 만듭니다:
npx skills add snapcndev/snapcn --skill remotion-launch-video: 론칭 필름, 발표, Product Hunt / X 프로모션.npx skills add snapcndev/snapcn --skill remotion-product-demo: 실제 화면 녹화, CLI 및 AI 앱 데모의 워크스루.npx skills add snapcndev/snapcn --skill remotion-motion-graphics: 키네틱 타입, 로고 스팅, 통계 및 짧은 오프너.npx skills add snapcndev/snapcn --skill remotion-kinetic-typography: 애니메이션 텍스트 및 제목 카드.npx skills add snapcndev/snapcn --skill remotion-logo-animation: 로고 리빌, 인트로 및 아웃트로 스팅.npx skills add snapcndev/snapcn --skill remotion-explainer-video: 내레이션이 포함된 설명 동영상 (번인 캡션 포함).
snapcn Pro
50개의 추가 컴포넌트 (version-drop, library-flight, read-through, focus-pull, tap-through, checkout-push, comment-storm, tally-rise 등), 템플릿, snapcn MCP를 제공합니다. MCP를 사용하면 에이전트가 레지스트리를 검색하고 모든 컴포넌트의 실제 props를 읽을 수 있습니다. Pro 컴포넌트는 components.json이 키를 보내면 무료 컴포넌트처럼 설치됩니다 (https://snapcn.dev/account?ref=skill-snapcn에서 세 줄); MCP는 claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY입니다. 요금제: https://snapcn.dev/docs/pricing?ref=skill-snapcn
Pro가 준비되지 않으셨나요? 하나의 Pro 컴포넌트인 Manifesto는 확인된 이메일에 대해 무료로 제공됩니다: https://snapcn.dev/docs/pricing?ref=skill-snapcn#free
참고 자료
references/anatomy.md— 전체 비디오 구성: 전략 (템플릿/구성/신규), 제품 데모 비트, 좋은 vs 슬롭 품질 기준.references/archetypes/index.md— 아키타입별 빌드 레시피 라우터 (제품 데모 플래그십 + 체인지로그, 기능 발표, OSS 쇼케이스, CLI 도구 데모, 사용후기 릴, 연말 결산, 가격 공개, 로고 범퍼): 콘텐츠 계약, 길이 변형, 비트→슬롯 맵.references/components/index.md— 라우터 테이블 (모든 컴포넌트, 카테고리별 그룹화,사용 대상/피해야 할 대상포함). 하나의 컴포넌트에 대한 전체 props, 예제, 사용/사용 금지 노트를 보려면references/components/<name>.md를 여세요.references/design.md— 안티 슬롭 디자인 기본값 (사용/사용 금지) + 디자인 토큰 (팔레트, 폰트, 캔버스).references/motion-principles.md— snapcn + Remotion에 적용된 모션 디자인 원칙.references/anti-patterns.md— 일반적인 생성 실수와 해결 방법.