Remotion Bits
이 스킬을 사용하여 먼저 라이브 Remotion Bits 예제를 기반으로 구축하고, 예제가 충분하지 않을 때만 프리미티브로 폴백하세요.
기본 워크플로
- 사용자의 시각적 목표, 모션 스타일 또는 장면 설명을 사용하여
find_remotion_bits로 시작하세요. fetch_remotion_bit로 가장 잘 맞는 한두 개의 결과를 가져오세요.- 프리미티브로 구성하기 전에 가장 가까운 예제를 먼저 적용하세요.
- 여러 예제가 일치하는 경우, 요청을 충족하는 가장 간단한 예제를 선호하세요.
- 요청이 다단계, 카메라 기반 또는 프레젠테이션 스타일인 경우
Scene3D예제를 우선시하세요. - 문서 비트를 적용할 때는 반응형 크기 조정, 테마 색상 사용 및 자체 포함된 예제 구조를 유지하세요.
문서 비트를 작동 패턴의 기본 라이브러리로 취급하세요. 기존 비트가 이미 필요한 컴포지션 모양, 타이밍 모델 및 레이아웃 구조를 제공하는지 확인한 후에만 프리미티브를 사용하세요.
폴백 체인
- MCP 우선
find_remotion_bits로 검색하고fetch_remotion_bit로 전체 소스를 가져오세요.
- CLI 차선
npx remotion-bits find "hero intro" --tag scene-3d --json및npx remotion-bits fetch bit-fade-in --json을 사용하세요.
- 직접 문서 검사 최후
docs/src/bits/catalog.ts및docs/src/bits/examples/**를 검사한 후 가장 가까운 예제를 수동으로 적용하세요.
MCP 표면이 사용 가능하면 CLI보다 먼저 사용하세요. CLI가 사용 가능하면 파일을 직접 읽기 전에 사용하세요.
CLI 및 MCP 설정
저장소 내부 워크플로가 필요하지 않은 경우 게시된 패키지를 직접 사용하세요:
# 설치 없이
npx remotion-bits find 3d cards
npx remotion-bits fetch bit-fade-in --json
# 전역 설치
npm i -g remotion-bits
remotion-bits find 3d cards
remotion-bits fetch bit-fade-in --json
게시된 패키지에서 MCP 서버를 같은 방식으로 시작하세요:
# 설치 없이
npx remotion-bits mcp
# 전역 설치
remotion-bits mcp
에이전트나 MCP 클라이언트가 stdio 명령어가 필요한 경우 다음 중 하나를 가리키세요:
{
"command": "npx",
"args": ["-y", "remotion-bits", "mcp"]
}
{
"command": "remotion-bits",
"args": ["mcp"]
}
이 저장소 내부에서는 동등한 저장소 로컬 명령어가 그대로 유지됩니다:
npm run bits:find -- --query "hero intro" --tag scene-3d --json
npm run bits:fetch -- bit-fade-in --json
npm run mcp:bits
효과적인 검색 방법
- 시각적 결과로 검색하세요:
flying camera through cards,counter with confetti,typewriter terminal,gradient background,staggered grid reveal. - 모양이 명확할 때 태그를 추가하세요:
scene-3d,text,particles,gradient,code,counter. - 요청이 모호할 때는 강력한 일치 항목 하나와 백업 하나를 가져오세요.
- 요청을 충족하면서 가장 적은 움직이는 부분을 가진 예제를 선호하세요.
적용 규칙
useViewportRect크기 조정을 유지하세요. 하드코딩된 픽셀보다rect.vmin,rect.vmax,rect.width,rect.height를 선호하세요.docs/src/styles/custom.css의 테마 색상을 유지하세요. 사용자가 새 팔레트를 요청하지 않는 한 임의의 색상으로 바꾸지 마세요.- 문서 비트
Component함수는 완전히 자체 포함되도록 유지하세요. 예제가 문서 플레이그라운드 경로에서 사용될 경우 헬퍼, 상수 또는 데이터 배열을 모듈 범위에 남겨두지 마세요. - 문서 비트는 디스플레이용으로 미리 래핑되어 있습니다. 독립형 Remotion 컴포지션으로 변환하는 경우 자체 외부 레이아웃과 배경을 추가하세요.
- 단계별 진입 및 종료 모션의 경우 수동 프레임 위상 계산보다
StaggeredMotion시퀀싱을 선호하세요. - 프레젠테이션 흐름의 경우 예제의 단계 구조를 먼저 유지한 다음 콘텐츠, 카메라 대상 및 타이밍을 변경하세요.
프리미티브 빠른 참조
AnimatedText: 페이드, 슬라이드, 단어별 분할, 문자별 분할 및 텍스트 순환을 위한 진입점입니다. 모션이 주로 텍스트 표시일 때 사용하세요. 텍스트 스테거링을 수동으로 다시 작성하지 마세요.AnimatedCounter: 접두사 및 접미사 지원이 포함된 숫자 보간입니다. KPI, 가격 및 통계 표시에 사용하세요. 형식이 지정된 문자열을 직접 애니메이션하지 마세요.TypeWriter: 커서 동작이 포함된 입력 및 삭제 텍스트입니다. 터미널, CLI 및 순차적 헤드라인 효과에 사용하세요.CodeBlock이 실제 프리미티브인 조밀한 코드 레이아웃에는 사용하지 마세요.CodeBlock: 구문 강조 코드 표시와 라인 스테거링, 포커스 및 강조 영역입니다. 편집기 및 코드 데모 장면에 사용하세요. 레이아웃이 의도적으로 사용자 정의되지 않은 경우 코드 라인을 수동으로 렌더링하지 마세요.MatrixRain: 바로 사용 가능한 매트릭스 스타일 텍스트 비입니다. 요청이 명시적으로 매트릭스 또는 해커 레인 테마인 경우 사용하세요. 일반 파티클 배경으로 사용하지 마세요.GradientTransition: 애니메이션 CSS 그라디언트 배경 및 전환입니다. 모션이 주로 배경색 및 그라디언트 진화일 때 사용하세요. 효과가 그라디언트 전환이 아닌 경우 수동 색상 보간으로 대체하지 마세요.StaggeredMotion: 반복되는 자식을 위한 공유 시퀀싱 프리미티브입니다. 목록, 그리드, 카드 스택 및 다중 요소 진입에 사용하세요. 애니메이션이 단순히 스테거드 변형과 불투명도인 경우 자식별 프레임 계산을 피하세요.Particles및 파티클 시스템 프리미티브: 앰비언트 모션, 분수, 눈, 반딧불이 및 필드 효과에Particles,Spawner,Behavior를 사용하세요. 텍스트 시퀀싱 또는 레이아웃 전환에는 사용하지 마세요.Scene3D: 카메라, 단계 및 3D 공간 컴포지션입니다. 요청이 프레젠테이션, 플라이스루, 다단계 워크스루 또는 카메라 기반 쇼케이스와 같은 느낌일 때 사용하세요. 카메라 움직임이 핵심이라면 일반 시퀀스로 다시 작성하지 마세요.useViewportRect: 크기 조정 및 레이아웃 기초입니다. 거의 모든 반응형 비트에서 사용하세요. 의도적으로 고정 렌더 대상을 일치시키는 경우가 아니라면 하드코딩된 픽셀 크기를 피하세요.
일반 결정 규칙
- 반복되는 자식에 동일한 모션이 필요할 때:
StaggeredMotion을 사용하세요. - 텍스트 특화 표시 동작이 필요할 때:
AnimatedText로 시작하세요. - 카운팅이 필요할 때:
AnimatedCounter를 사용하세요. - 타이핑이 필요할 때:
TypeWriter를 사용하세요. - 화면에 코드가 필요할 때:
CodeBlock을 사용하세요. - 앰비언트 이미터 또는 파티클이 필요할 때: 파티클 시스템 프리미티브를 사용하세요.
- 장면 간 카메라 모션이 필요할 때:
Scene3D를 사용하세요.
예제 우선 패턴
- 텍스트 요청: 텍스트 비트를 찾아 가져온 후 복사, 타이밍 및 분할 모드를 변경하세요.
- 카운터 요청: 카운터 예제를 찾아 값, 레이블 및 파티클 악센트를 적용하세요.
- 코드 요청: 코드 블록 또는 타자기 예제를 찾아 코드 샘플 및 강조 영역을 적용하세요.
- 배경 요청: 그라디언트 또는 파티클 예제를 찾아 팔레트, 밀도 및 지속 시간을 적용하세요.
- 프레젠테이션 요청:
Scene3D예제를 먼저 찾은 후 새 프리미티브를 도입하기 전에 단계 위치, 제목 및 카드 콘텐츠를 적용하세요.
최소 운영 예제
# MCP
find_remotion_bits {"query":"camera flythrough product showcase","tags":["scene-3d"],"limit":2}
fetch_remotion_bit {"id":"bit-carousel-3d"}
# CLI
npx remotion-bits find "camera flythrough product showcase" --tag scene-3d --limit 2 --json
npx remotion-bits fetch bit-carousel-3d --json
참조
references/components.mdreferences/utilities.mdreferences/patterns.md