Remotion Bits
이 스킬을 사용하여 먼저 라이브 Remotion Bits 예제를 기반으로 빌드하고, 예제만으로 충분하지 않을 때만 기본 요소(primitives)로 대체하세요.
기본 워크플로우
- 사용자의 시각적 목표, 동작 스타일 또는 장면 설명을 사용하여
find_remotion_bits로 시작합니다. fetch_remotion_bit로 가장 적합한 하나 또는 두 개의 결과를 가져옵니다.- 기본 요소로 직접 구성하기 전에 가장 가까운 예제를 먼저 적용합니다.
- 여러 예제가 일치하는 경우, 요청을 충족하는 가장 간단한 예제를 선호합니다.
- 요청이 다단계, 카메라 연출 또는 프레젠테이션 스타일인 경우
Scene3D예제를 우선 선택합니다. - 문서 Bits를 적용할 때는 반응형 크기, 테마 색상 사용 및 자체 포함된 예제 구조를 유지합니다.
문서 Bits를 작업 가능한 패턴의 기본 라이브러리로 취급하세요. 기존 Bits가 이미 필요한 구성 형태, 타이밍 모델 및 레이아웃 구조를 제공하는지 확인한 후에만 기본 요소를 사용합니다.
폴백 체인
- 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의 테마 색상을 유지합니다. 사용자가 새 팔레트를 요청하지 않는 한 임의의 색상으로 변경하지 마십시오.- 문서 Bit의
Component함수를 완전히 자체 포함된 상태로 유지합니다. 예제가 문서 재생 경로에서 사용될 경우, 헬퍼, 상수 또는 데이터 배열을 모듈 범위에 남겨두지 마십시오. - 문서 Bits는 표시용으로 미리 래핑되어 있습니다. 독립형 Remotion 합성물로 전환하는 경우, 자체 외부 레이아웃과 배경을 추가하십시오.
- 단계별 인/아웃 모션의 경우, 수동 프레임 단계 계산보다
StaggeredMotion시퀀싱을 선호합니다. - 프레젠테이션 흐름의 경우, 예제의 단계 구조를 먼저 유지한 다음 콘텐츠, 카메라 대상 및 타이밍을 변경합니다.
기본 요소 빠른 참조
AnimatedText: 페이드, 슬라이드, 단어별 분할, 문자별 분할 및 텍스트 순환의 진입점입니다. 모션이 주로 텍스트 리빌일 때 사용합니다. 수동으로 텍스트 스태거링을 다시 구축하지 마십시오.AnimatedCounter: 접두사 및 접미사 지원이 있는 숫자 보간법입니다. KPI, 가격 및 통계 리빌에 사용합니다. 서식이 지정된 문자열을 직접 애니메이션하지 마십시오.TypeWriter: 커서 동작이 있는 입력 및 삭제 텍스트입니다. 터미널, CLI 및 순차적인 헤드라인 효과에 사용합니다.CodeBlock이 실제 기본 요소인 밀집된 코드 레이아웃에는 사용하지 마십시오.CodeBlock: 라인 스태거링, 포커스 및 하이라이트 영역이 있는 구문 강조 코드 리빌입니다. 편집기 및 코드 데모 장면에 사용합니다. 레이아웃이 의도적으로 커스텀이 아닌 이상 코드 라인을 수동으로 렌더링하지 마십시오.MatrixRain: 즉시 사용 가능한 매트릭스 스타일 텍스트 비입니다. 요청이 명시적으로 매트릭스 또는 해커-레인 테마일 때 사용합니다. 일반 입자 배경으로 사용하지 마십시오.GradientTransition: 애니메이션 CSS-그라디언트 배경 및 전환입니다. 모션이 주로 배경 색상과 그라디언트 변화일 때 사용합니다. 효과가 그라디언트 전환이 아닌 경우에만 수동 색상 보간으로 대체하십시오.StaggeredMotion: 반복되는 자식을 위한 공유 시퀀싱 기본 요소입니다. 목록, 그리드, 카드 스택 및 다중 요소 출현에 사용합니다. 애니메이션이 단순히 스태거된 변형 및 불투명도일 때 자식별 프레임 계산을 피하십시오.Particles및 입자 시스템 기본 요소:Particles,Spawner,Behavior를 사용하여 주변 모션, 분수, 눈, 반딧불이 및 필드 효과를 만듭니다. 텍스트 시퀀싱이나 레이아웃 전환에는 사용하지 마십시오.Scene3D: 카메라, 단계 및 3D 공간 구성입니다. 요청이 프레젠테이션, 플라이스루, 다단계 워크스루 또는 카메라 연출 쇼케이스처럼 느껴질 때 사용합니다. 카메라 움직임이 핵심이라면 일반 시퀀스로 다시 구축하지 마십시오.useViewportRect: 크기 조정 및 레이아웃 기초입니다. 거의 모든 반응형 Bit에서 사용합니다. 의도적으로 고정된 렌더링 대상을 일치시키는 경우가 아니라면 하드코딩된 픽셀 크기를 피하십시오.
일반적인 결정 규칙
- 반복되는 자식에 동일한 모션이 필요한 경우:
StaggeredMotion을 사용합니다. - 텍스트별 리빌 동작이 필요한 경우:
AnimatedText로 시작합니다. - 카운팅이 필요한 경우:
AnimatedCounter를 사용합니다. - 타이핑이 필요한 경우:
TypeWriter를 사용합니다. - 화면에 코드가 필요한 경우:
CodeBlock을 사용합니다. - 주변 방출기 또는 입자가 필요한 경우: 입자 시스템 기본 요소를 사용합니다.
- 장면 간 카메라 모션이 필요한 경우:
Scene3D를 사용합니다.
예제 우선 패턴
- 텍스트 요청: 텍스트 Bit를 찾아 가져온 다음, 복사본, 타이밍 및 분할 모드를 변경합니다.
- 카운터 요청: 카운터 예제를 찾아 가져온 다음, 값, 레이블 및 입자 악센트를 적용합니다.
- 코드 요청: 코드 블록 또는 타자기 예제를 찾아 가져온 다음, 코드 샘플 및 하이라이트 영역을 적용합니다.
- 배경 요청: 그라디언트 또는 입자 예제를 찾아 가져온 다음, 팔레트, 밀도 및 지속 시간을 적용합니다.
- 프레젠테이션 요청:
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