vibe-motion/skills

Remotion에서 무한 3D 수직 스크롤 티커 애니메이션을 생성합니다. 파라라ックス 갤러리, 무한 이미지 스크롤, 다중 열 연속 수직 스크롤 효과, 또는 3D 사진 벽(3D照片滚动墙 / 3D相册瀑布流)을 구축해야 할 때 사용하세요.

skills란 무엇인가요?

이 스킬은 Remotion에서 무한한 다중 열 3D 스크롤 애니메이션(사진 갤러리, 3D 사진 벽, 기술 스택 쇼케이스, 크레딧 롤 등)을 만들기 위한 재사용 가능한 아키텍처 패턴과 컴포넌트를 제공합니다. 도메인 복제와 모듈러 연산을 결합한 CSS 3D 변환을 사용하여 무한 스크롤 착시를 구현합니다. 콘텐츠 목록을 두 배로 복제하고 프레임 속도와 원하는 루프 지속 시간에 따라 0에서 1까지의 진행률을 계산한 다음, 열을 0%에서 -50%(또는 역방향의 경우 -50%에서 0%)로 변환합니다. 콘텐츠가 복제되었기 때문에 -50%의 프레임은 0%의 프레임과 동일하게 보여 리셋 시 매끄러운 루프를 만듭니다. 또한 부모 래퍼가 perspective, rotateX, scale을 적용하여 3D 효과를 주고, CSS 그라데이션 오버레이로 가장자리를 부드럽게 페이드 처리합니다. 이 컴포넌트는 데이터에 구애받지 않으며 이미지 URL 또는 React 노드 배열을 열로 받아들이고, 열마다 다른 durationInSeconds와 direction(1 또는 -1)을 지정하여 파라라ックス 효과를 낼 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/vibe-motion/skills/tree/HEAD/remotion-3d-ticker

문서

Remotion 3D 수직 티커

이 스킬은 Remotion에서 무한한 다중 열 3D 스크롤 애니메이션(사진 갤러리, 3D照片滚动墙, 기술 스택 쇼케이스, 크레딧 롤 등)을 만들기 위한 재사용 가능한 아키텍처 패턴과 컴포넌트를 제공합니다.

작동 원리

무한 스크롤 착시는 도메인 복제 및 모듈러 연산과 CSS 3D 변환을 결합하여 구현됩니다.

무한의 수학: 콘텐츠 목록을 복제합니다([...items, ...items]). 프레임 속도와 원하는 루프 지속 시간을 기준으로 0에서 1까지의 progress를 계산합니다. 열을 0%에서 -50%(또는 역방향의 경우 -50%에서 0%)로 변환합니다. 콘텐츠가 복제되었기 때문에 -50%의 프레임은 0%의 프레임과 동일하게 보여 리셋 시 매끄러운 루프를 만듭니다.
3D 원근감: 부모 래퍼가 perspective: 1000px, rotateX(20deg), scale(1.2)를 적용합니다. 스케일은 기울어진 위쪽 및 아래쪽 가장자리가 2D 화면 경계를 넘어 확장되어 빈 배경이 비치는 것을 방지하는 데 중요합니다.
마스킹: CSS linear-gradient 오버레이가 상단과 하단에 절대 위치로 배치되며 높은 zIndex를 가져 콘텐츠를 배경색으로 부드럽게 페이드 처리합니다.

이 스킬 사용 방법

사용자가 수직 스크롤 갤러리나 무한 티커를 요청할 때:

에셋 복사: assets/VerticalTicker.tsx에 위치한 제네릭 컴포넌트를 제공하거나 프로젝트의 components/animations 폴더로 복사합니다.
구성: 사용자에게 Remotion <Composition /> 내에서 <VerticalTicker /> 컴포넌트를 가져와 렌더링하도록 안내합니다.
데이터 적용: 이 컴포넌트는 데이터에 구애받지 않습니다. 이미지 URL 또는 React 노드의 배열을 열로 받아들입니다. 열마다 다른 durationInSeconds와 direction(1 또는 -1)을 지정하여 파라라ックス 효과를 낼 수 있습니다.

제공되는 에셋

assets/VerticalTicker.tsx: 3D 무한 스크롤 패턴을 구현하는, 재사용성이 높고 강력한 타입의 Remotion 컴포넌트입니다.