JoaoIurovschi/faisca

FAÍSCA

트리거 단어: faísca. 사용자가 "faísca"를 입력하고 영상(주제, 문구, 형식)을 설명하면, 이 스킬이 프로젝트를 생성하고, 타임라인을 구성하며, MP4를 렌더링합니다.

SKILL_DIR = 이 파일이 있는 폴더입니다. 구성은 HyperFrames(HTML + GSAP)이며, 타임라인은 SLOW 배로 늘어나고 60fps로 렌더링됩니다. render-faisca.sh는 각 SLOW 서브프레임의 평균을 내어 실제 모션 블러를 생성하며, After Effects 스타일의 결과물을 제공합니다.

• 기성 효과 카탈로그, 타이밍 및 코드 위치: referencias/efeitos.md
• 참조 동영상 연구(분석, 폰트 및 색상 측정, 비교): referencias/recriar-referencia.md
• 코드로 작곡된 오리지널 사운드트랙 및 오디오에 반응하는 모션: referencias/trilha-propria.md, 템플릿은 trilha/에 있습니다.
• HyperFrames 계약: hyperframes 스킬이 설치되어 있다면, 구조를 수정하기 전에 먼저 읽으세요; npx hyperframes docs gsap 및 npx hyperframes docs data-attributes도 도움이 됩니다.

시작 전에

1. 작품의 주인. 게시할 브랜드의 색상과 폰트를 사용하세요. 브랜드가 지정되지 않은 경우, 기본 모델의 라임 그린을 사용합니다.
2. 말할 내용. 짧고 강력한 문구(화면당 2~4단어)와 연속적인 자막. 사용자가 요청한 내용만 포함하고, 임의로 만들지 마세요.
3. 형식 및 길이. 기본값은 16:9입니다. Reels 및 TikTok은 9:16(참조: referencias/efeitos.md 끝부분). 내레이션이 없으면 스타일상 415초가 적절합니다. 내레이션이 있으면 각 화면이 0.40.8초마다 전환되는 한 길어질 수 있습니다.
4. 폴더. 가능하면 동기화 폴더(iCloud, Dropbox) 밖에 영상마다 하나의 폴더를 만드세요.
5. 크레딧 없음. 모든 작업은 로컬에서 실행됩니다.

1단계 · 프로젝트 생성

SKILL_DIR/scripts/novo-faisca.sh <프로젝트-폴더>

hyperframes init를 실행하고, 템플릿(작동하는 4초 구성, 로컬 폰트)을 복사한 후 린트에 0개 오류가 있는지 확인합니다. OK:가 없으면 중단하고 수정하세요.

2단계 · 아이덴티티

• 강조 색상: :root의 네 가지 변수 --acento, --acento-rgb, --acento-claro, --acento-escuro. 모든 요소(광채, 불꽃, 레이저, 필, 플레이트, 3D)가 이 색상에서 파생됩니다.
• 폰트: assets/fonts/에 있으며, 파일 자체에 @font-face로 포함됩니다(린트는 로컬 파일을 요구함). 제목 폰트는 굵고 좁은 폰트로만 교체하세요; 미리 측정하세요(recriar-referencia 참조).
• HUD (#hudBrand): 작품의 브랜드 이름. 다른 회사의 브랜드는 절대 넣지 마세요.

3단계 · 스크립트 및 타임라인

1. 디컷 목록 작성: 실제 시간(초), 텍스트, 카탈로그의 효과를 포함한 이벤트 목록. 0.4~0.8초마다 하나의 아이디어.
2. DUR을 조정하고, 동시에 #root와 #stage의 data-duration을 DUR × SLOW로 설정합니다 (render-faisca.sh가 일치하지 않으면 거부함).
3. // ---------- linha do tempo 블록에서 텍스트와 시간을 교체합니다. 새 장면의 경우, 카탈로그에서 효과 패턴을 복사합니다. 매 순간 위치를 따라가는 효과는 draw(t)에 넣습니다.
4. SLOW = 8이 거의 모든 경우에 적합합니다. 매우 빠른 확대/축소 또는 통과는 8개 샘플에서 "링"이 나타납니다: 16으로 증가(렌더링 시간 두 배).
5. 내레이션이 있는 경우: 각 단어의 시간(Whisper 또는 유사 도구 사용)을 추출하고, 추측 대신 해당 시간에 효과를 고정합니다.

4단계 · 프레임별 검토

SKILL_DIR/scripts/quadros.sh <프로젝트> 0.3,0.9,1.3,1.6,2.3,2.7,3.2,3.6,3.9

실제 시간(초)입니다(스크립트가 SLOW를 곱합니다). 시트를 확인하세요: 텍스트 잘림, 단어 위치 이상, 효과가 나타나지 않음. 프레임은 단일 샘플이며 블러가 없습니다.

5단계 · 렌더링 및 확인

SKILL_DIR/scripts/render-faisca.sh <프로젝트> <프로젝트>/renders/<이름>.mp4 [--audio trilha.wav]
SKILL_DIR/scripts/render-faisca.sh <프로젝트> /tmp/sabotagem.mp4 --sabotar   # 반드시 실패해야 함

렌더러는 세 가지를 확인합니다: data-duration = DUR × SLOW, 60fps에서의 프레임 수, 블러 존재(최종 비디오가 움직임이 있는 부분에서 단일 샘플과 달라야 함). --sabotar는 블러 없이 생성되며 ERRO: sem desfoque로 종료되어야 합니다: 이는 확인 메커니즘이 실패를 감지할 수 있음을 증명합니다. 4초 렌더링은 시스템에 따라 약 1~4분이 소요됩니다.

npx hyperframes check도 실행되지만, 레이아웃 감사는 설계상 아직 나타나지 않는 자막 단어 (투명함, text_not_painted) 및 겹치는 3D 레이어(content_overlap)에 대해 경고합니다. 필수 사항: 린트 오류 0개; 이러한 레이아웃 발견은 예상된 것입니다.

6단계 · 전달

• MP4를 전달하고 위치를 알려주세요.
• 요청사항과 다른 점을 숨기지 말고 설명하세요.
• 다른 사람의 동영상 연구: 나란히 비교는 연구 목적으로만 사용하고 게시하지 마세요.

이미 해결된 함정

증상	원인 및 수정 방법
절차적 효과가 사라지거나 개별 프레임에서 멈춤	draw(t)가 상태를 저장하거나 DOM을 측정함. t의 순수 함수여야 함; build()에서 측정
막대가 떨리며 올라가는 것을 멈춤	draw가 GSAP이 애니메이션하는 동일한 요소에 style.transform을 씀. 떨림은 자식(#rbInner)으로 이동
숨겨진 요소가 렌더링에 나타나지 않음	fromTo의 "from"에만 opacity: 1이 있음. 대상에도 opacity: 1 설정
자막 필이 보이지 않음	z-index: -1이 쌓임 맥락 없이 사용됨. 단어에 isolation: isolate 설정
검토 프레임이 잘못된 시간에 나타남	--at 스냅샷 시간은 늘어난 타임라인 시간임. quadros.sh를 사용하면 SLOW를 곱함
최종 확대에서 링이 나타남	지수적 스케일에는 8개 샘플로 충분하지 않음. SLOW = 16(및 data-duration 함께)
촬영된 참조 색상이 다르게 보임	화면을 촬영하는 카메라는 색상이 과장됨. 샘플이 아닌 원본 색상 사용
검토 프레임이 모두 동일함(배경만)	도구가 build() 완료 전에 캡처함. quadros.sh는 이미 20초를 기다림
렌더링이 느리거나 멈춤	임시 파트가 동기화된 폴더에 있음. 스크립트는 MOTION_TMP 또는 시스템 임시 폴더를 사용함
렌더링이 수십 GB의 디스크 공간을 요청함	각 프레임을 기록하는 병렬 캡처. render-faisca.sh는 이미 HF_CAPTURE_PARALLEL_STREAM=true를 설정
className 또는 textContent가 GSAP에 의해 변경되지 않음	GSAP 3는 set으로 이러한 속성을 적용하지 않음. t의 함수로 draw(t)에서 변경
translateX(-50%)로 중앙 정렬된 요소가 위치를 벗어남	GSAP의 스케일이 transform을 다시 씀. xPercent: -50으로 중앙 정렬