TL;DR

이 레포는 Claude Code, Codex 등 SKILL.md 호환 에이전트에 설치해 브랜드 입력을 인터뷰 방식으로 수집하고 Higgsfield를 통해 장면별 스틸과 다이브인 비디오, 프레임 일치 커넥터를 생성해 하나의 연속된 스크롤-스크럽 비행으로 배치하는 스킬이다. 파이프라인은 사용자 인터뷰 → Higgsfield 프롬프트 기반 자산 생성 → 프레임 추출 및 커넥터 생성 → scrub-engine.js를 통한 스크롤 동기 재생의 순서로 작동하며 블롭-시킹과 시임 크로스페이드로 장면 전이를 매끄럽게 처리한다. 자산 생성은 장면 수에 비례해 Higgsfield 크레딧을 소모하고 백그라운드에서 진행되므로 비용과 시간이 주요 고려사항이며 인코딩·프레임 처리에는 ffmpeg와 선택적 Python 도구가 필요하다. 따라서 빠른 프로토타이핑과 에이전트 기반 자동화에 적합하지만 Higgsfield 크레딧과 인코딩 워크플로를 운영할 준비가 되어 있어야 한다.

주요 기능

• 사용자 인터뷰 기반 장면 구성 기능은 사용자가 산업·브랜드 키트·아트 방향을 입력하면 장면 순서와 프롬프트를 자동 생성한다. 이 과정은 스킬이 질의 응답 형식으로 입력을 수집하고 그 결과를 Higgsfield 프롬프트로 변환해 자산 생성을 트리거한다. 결과적으로 브랜드별 맞춤 장면 세트가 파이프라인에 의해 배치 실행될 수 있다.
• Higgsfield 연동 자산 생성은 각 장면당 스틸 이미지와 장면 내부로 '다이브인'하는 카메라 클립을 생성하며 연속 장면을 잇는 커넥터 클립을 렌더된 이웃 프레임에서 생성한다. 이 방식은 장면 간 이음새가 프레임 단위로 일치하도록 만들어 스크롤에서 컷이 생기지 않는 연속 비행을 보장한다. 생성 작업은 백그라운드에서 실행되며 진행 상태를 폴링 방식으로 확인할 수 있다.
• 프레임 기반 스크럽 엔진(scrub-engine.js)은 블롭-시킹(blob-seek), 레이지 로드, 시임 크로스페이드(seam crossfade)를 지원하는 구성 기반의 자바스크립트 모듈이다. 엔진은 HTML, Next.js, Vue 또는 간단한 Python 제공 페이지에 그대로 삽입되며 스크롤 위치를 시간 좌표로 변환해 비디오 재생을 제어한다. 프레임 일치와 교차 페이딩을 통해 연속된 카메라 이동을 시각적으로 매끄럽게 재현한다.
• 파이프라인 문서는 prompts.md와 pipeline.md로 배포되어 사용자가 배치 스크립트를 복사해 즉시 자산 생성에서 인코딩까지 실행할 수 있다. 이들 문서는 Higgsfield 프롬프트 템플릿과 프레임 추출, 커넥터 생성, 인코딩 절차를 명시적으로 포함한다. 따라서 자산 생성 비용과 시간 계산을 포함한 반복 가능한 워크플로를 로컬에서 재현할 수 있다.

어떻게 동작하는가

이 스킬은 사용자의 입력을 인터뷰 형식으로 수집한 뒤 Higgsfield 서비스에 장면별 프롬프트를 보낸다. Higgsfield로부터 스틸 이미지와 다이브인 카메라 클립, 그리고 인접 장면 간 이음새를 프레임 단위로 일치시키는 커넥터 클립을 생성받아 로컬 파이프라인으로 수집한다. 수집된 미디어는 scrub-engine.js로 구성되어 스크롤 위치에 매핑된 시간 기반 재생을 수행하며 블롭 시킹과 시임 크로스페이드로 장면 전이를 매끄럽게 연결한다.

해결 문제

브랜드 랜딩 페이지에서 스크롤에 따라 연속 카메라 비행을 구현하려면 이미지·비디오 자산 생성, 프레임 일치 커넥터, 그리고 스크롤 기반 재생 엔진이 모두 필요하다. 이 레포는 입력 수집부터 Higgsfield를 통한 이미지 및 비디오 생성, 프레임 수준의 커넥터 생성, 그리고 브라우저에 붙이는 스크럽 엔진까지 전체 파이프라인을 제공한다. 결과적으로 별도 그래픽팀이나 복잡한 애니메이션 코드를 작성하지 않고도 브랜드별 연속 비행 랜딩 페이지를 자동화할 수 있다.

지금 주목받는 이유

이 레포는 에이전트 플러그인 형태로 Claude Code, Codex 등 20개 이상의 에이전트와 통합될 수 있어 에이전트 기반 콘텐츠 생성 워크플로에 직접 연결된다는 점에서 주목을 받는다. GitHub 상의 별 수가 1,000개를 상회하는 수준으로 커뮤니티 관심이 확인되며 시각적으로 몰입형 랜딩 페이지를 자동화하려는 수요와 맞물려 관심이 증가했다. 또한 Higgsfield와 같은 이미지·비디오 생성 서비스와 결합해 자산 생성 자동화를 제공하는 점이 시의적절한 트렌드와 연계된다.

차별점

• 에이전트 스킬 형태로 제공되어 Claude Code, Codex 및 SKILL.md 호환 에이전트에 직접 설치해 워크플로를 에이전트 대화로 트리거할 수 있다. 이 구조는 대화형 워크플로와 자동 입력 수집을 결합해 수동 설정 단계를 줄인다. 플러그인 설치나 CLI 설치를 통해 빠르게 기존 에이전트 환경에 통합할 수 있다는 점이 특징이다.
• Higgsfield의 이미지·비디오 생성 능력을 파이프라인에 직접 연결해 장면당 스틸 이미지와 다이브인 클립, 그리고 이웃 프레임으로 생성한 커넥터를 자동으로 만든다. 프레임 일치 기반의 커넥터는 장면 사이의 시각적 이음새를 프레임 단위로 유지하므로 스크롤 시 컷이 없는 연속 비행을 보장한다. 이 방식은 단순한 이미지 슬라이드나 임시 전환과 달리 카메라가 실제로 이동하는 것 같은 몰입감을 제공한다.
• 프레임 기반의 포팅 가능한 scrub-engine.js는 스택에 구애받지 않고 순수한 바닐라 JS로 동작하도록 설계되어 Next.js, Vue 또는 단일 HTML 페이지에 그대로 삽입할 수 있다. 엔진은 블롭-시킹, 레이지 로드, 시임 크로스페이드 같은 구체적 메커니즘을 포함해 성능과 사용자 경험을 동시에 고려한 구현을 제공한다. 따라서 특정 프레임워크 전용 어댑터를 추가로 개발할 필요 없이 다양한 웹 프로젝트에 재사용 가능하다.

사용 사례

• 브랜드 랜딩 페이지를 위한 몰입형 제품 소개 사이트를 빠르게 제작할 때 이 스킬을 사용하면 장면 기획·자산 생성·스크럽 구성까지 한 번에 처리할 수 있다. 입력으로 브랜드 키트와 간단한 장면 설명을 제공하면 스킬이 프롬프트를 생성하고 Higgsfield로부터 필요한 미디어를 받아온다. 완성된 자산은 웹에 바로 마운트할 수 있는 형태로 제공되어 배포 시간을 단축한다.
• 에이전트 기반 프로토타이핑 워크플로에서 디자인 아이디어를 빠르게 시각화할 때 유용하다. 제품/서비스 컨셉을 에이전트에게 설명하면 스킬이 장면별 스틸과 다이브인 클립을 생성해 실제 스크롤 흐름을 시연할 수 있는 페이지 결과물을 만든다. 이 과정을 통해 비전 단계에서 비주얼 검증을 빠르게 수행할 수 있다.
• 마케팅 캠페인용 맞춤형 랜딩 페이지를 자동화해 반복 비용을 관리할 때 활용할 수 있다. 스킬은 장면 수에 비례해 Higgsfield 크레딧을 소비하므로 캠페인별 예산을 산정한 뒤 배치 생성을 예약해 대량의 캠페인 페이지를 순차적으로 생산할 수 있다. 자동화된 파이프라인은 동일한 브랜드 가이드라인을 여러 랜딩에 일관되게 적용하는 데 도움이 된다.

시작하기

가장 간단한 시작은 Claude Code에서 /plugin marketplace add oso95/scroll-world 및 /plugin install scroll-world@scroll-world 명령으로 플러그인을 설치한 뒤 /scroll-world 명령을 호출하는 것이다. Vercel의 skills CLI를 선호하면 npx skills add oso95/scroll-world 명령으로 설치한 뒤 에이전트 내에서 $scroll-world 또는 /skills를 통해 접근할 수 있다. 수동 설치가 필요할 경우 레포를 클론한 뒤 skills/scroll-world 폴더를 에이전트의 skills 디렉토리에 복사하면 된다.

요구사항

• Higgsfield CLI와 인증 및 크레딧이 필요하다. Higgsfield auth login으로 인증하고 프로젝트별로 이미지 및 비디오 생성 크레딧을 소모하므로 사전에 크레딧을 확보해야 한다. Higgsfield가 자산 생성의 핵심 파이프라인이므로 연결 설정이 필수이다.
• ffmpeg 및 ffprobe가 필요하며 프레임 추출과 비디오 인코딩 작업에 사용된다. 파이프라인 문서에 포함된 배치 스크립트는 ffmpeg를 이용해 생성된 프레임을 수집하고 커넥터를 인코딩하는 절차를 수행한다. 로컬 환경에서 인코딩과 프레임 처리를 자동화하려면 해당 바이너리들이 PATH에 존재해야 한다.
• Python 3과 Pillow는 선택적 의존성으로 투명 배경 장면의 배경 제거(knockout) 처리에 사용된다. knockout.py는 Pillow를 이용한 이미지 합성 처리를 수행하므로 이 기능을 사용하려면 Python 환경이 필요하다. 기본 워크플로는 Python 없이도 동작하나 일부 배경 처리 기능은 Python 의존성을 요구한다.