Communitygithub.com

ronnnerr/norstack

React 기반 프로그래매틱 비디오 생성. Remotion 오버레이, 모션 그래픽, 또는 mp4로 렌더링되는 React 컴포지션에 사용합니다. 생성된 모션만 포함되며, 푸티지는 비디오 및 세로 모드에 유지됩니다.

norstack란 무엇인가요?

이 스킬은 React와 Remotion을 사용하여 프로그래매틱하게 비디오 모션 그래픽을 생성하는 방법을 정의합니다. 주로 EDL(Edit Decision List) 오버레이, 모션 그래픽, 또는 React 컴포지션을 mp4로 렌더링하는 데 사용됩니다. Claude Code, Cursor, Codex 등 AI 에이전트가 비디오 편집 디렉토리 구조 내에서 작업할 수 있도록 설계되었으며, `durationInFrames` 기반의 정확한 타이밍, `interpolate` 및 `spring` 애니메이션, `Sequence`와 `AbsoluteFill`을 사용한 컴포지션 구성 등 Remotion의 핵심 법칙을 강조합니다. 또한 투명 오버레이를 위한 ProRes 4444 또는 WebM 알파 채널 선택, 폰트 및 오디오 사전 로드, 부모 컨텍스트의 fps 일치 등 실무 규칙을 제공하여 일관되고 효율적인 렌더링을 보장합니다. 질문 없이 직관적인 선택을 통해 빠른 렌더링을 지향합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ronnnerr/norstack/tree/HEAD/skills/remotion

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

remotion

푸티지 → video / portrait. React에서 생성된 모션을 위한 것입니다.

슬롯

절대 저장소 루트에 두지 않음. 항상:

<videos_dir>/edit/animations/slot_<id>/

해당 위치에서 스캐폴딩합니다. render.mp4로 렌더링합니다. EDL 오버레이를 해당 파일에 연결합니다.

법칙

  • durationInFrames가 진실입니다. CSS에서 초를 추측하지 마십시오.
  • interpolate / spring. 선형 사용 금지. 레이아웃 애니메이션(top/left/width) 사용 금지.
  • Sequence + AbsoluteFill. 하나의 아이디어당 하나의 컴포지션.
  • 폰트와 오디오를 사전 로드하십시오. 누락된 폰트는 재렌더링을 유발합니다.
  • fps는 별도로 명시하지 않는 한 부모(24 필름, 30 소셜)와 일치합니다.
  • 투명 오버레이 → ProRes 4444 또는 알파 채널 WebM. 선택 전에 확인하십시오.

렌더링 후

ffprobe render.mp4
# 그런 다음 출력 프레임 확인 / 보기

하드 비디오 규칙은 여전히 적용됩니다: 오버레이 PTS 시프트, 자막은 마지막에, 부모 컷에서 30ms 오디오 페이드.

벤처

profile 및 taste의 팔레트. 각 프로젝트는 고유한 팔레트를 가집니다. 남은 주황색 출시 비디오 키트가 없습니다.

슬롯 에이전트 내부에서 질문하지 마십시오. 명백한 것을 선택하고 렌더링하십시오.

관련 스킬