JoaoIurovschi/faisca

FAÍSCA

Auslösewort: faísca. Die Person schreibt „faísca“ und beschreibt das Video (Thema, Phrasen, Format); dieses Skill erstellt das Projekt, baut die Timeline und rendert das MP4.

SKILL_DIR = Ordner dieser Datei. Die Komposition ist HyperFrames (HTML + GSAP), mit der Timeline um SLOW-Faktor gestreckt und mit 60 fps gerendert; render-faisca.sh mittelt jedes SLOW Unterframe, und das Ergebnis ist echte Bewegungsunschärfe, die aussieht wie aus After Effects.

• Katalog der fertigen Effekte, Timing und wo sie im Code sind: referenzen/efeitos.md.
• Referenzvideo studieren (decoupieren, Schriftgröße und Farbe messen, vergleichen): referenzen/recriar-referencia.md.
• Eigener Soundtrack, per Code komponiert und Motion, das auf das Audio reagiert: referenzen/trilha-propria.md, Vorlagen in trilha/.
• HyperFrames-Vertrag: Wenn das Skill hyperframes installiert ist, vor Änderungen an der Struktur lesen; npx hyperframes docs gsap und npx hyperframes docs data-attributes helfen auch.

Vor allem anderen

1. Wessen Werk. Verwende die Farbe und Schriftarten der Marke, die veröffentlicht. Ohne definierte Marke bleibt das Limettengrün der Vorlage.
2. Was zu sagen ist. Kurze, einprägsame Sätze (2 bis 4 Wörter pro Bildschirm) und ein durchgehender Untertitel. Nur der Inhalt, den die Person verlangt hat; nichts erfunden.
3. Format und Dauer. Standard 16:9; Reels und TikTok 9:16 (siehe Ende von referencias/efeitos.md). Kein Voiceover, der Stil liefert 4 bis 15 s; mit Voiceover kann man länger gehen, solange jeder Bildschirm alle 0,4 bis 0,8 s wechselt.
4. Ordner. Ein Ordner pro Video, möglichst außerhalb synchronisierter Ordner (iCloud, Dropbox).
5. Kein Credit. Alles läuft lokal.

Schritt 1 · Projekt erstellen

SKILL_DIR/scripts/novo-faisca.sh <projekt-ordner>

Führt hyperframes init aus, kopiert die Vorlage (4 s funktionierende Komposition, lokale Schriftarten) und prüft, ob der Lint 0 Fehler ausgibt. Ohne OK:, anhalten und beheben.

Schritt 2 · Identität

• Akzentfarbe: die vier Variablen --acento, --acento-rgb, --acento-claro, --acento-escuro in :root. Alles (Glow, Funken, Laser, Pille, Platte, 3D) leitet sich daraus ab.
• Schriftarten in assets/fonts/ mit @font-face in der eigenen Datei (der Lint erfordert lokale Datei). Nur die Titelschrift durch eine schwere, kondensierte ersetzen; vorher messen (siehe recriar-referencia).
• HUD (#hudBrand): Markenname des Werks. Niemals die Marke eines anderen Unternehmens.

Schritt 3 · Drehbuch und Timeline

1. Decoupierung schreiben: Liste der Ereignisse mit Zeitpunkt (Sekunden, real), Text und Effekt aus dem Katalog. Eine Idee alle 0,4 bis 0,8 s.
2. DUR und gleichzeitig data-duration von #root und #stage auf DUR × SLOW setzen (render-faisca.sh weigert sich, wenn nicht passend).
3. Texte und Zeitpunkte im Block // ---------- linha do tempo austauschen. Für neue Szenen das Muster eines Effekts aus dem Katalog kopieren. Effekte, die positionsabhängig sind, kommen in draw(t).
4. SLOW = 8 reicht für fast alles. Sehr schneller Zoom oder Durchfahrt zeigt „Ringe“ mit 8 Samples: auf 16 erhöhen (verdoppelt Renderzeit).
5. Mit Voiceover: Zeit jedes Wortes ermitteln (Whisper o. ä.) und die Effekte an diese Zeitpunkte binden, statt zu schätzen.

Schritt 4 · Einzelbildkontrolle

SKILL_DIR/scripts/quadros.sh <projekt> 0.3,0.9,1.3,1.6,2.3,2.7,3.2,3.6,3.9

Zeitpunkte in realen Sekunden (das Script multipliziert mit SLOW). Auf dem Blatt prüfen: abgeschnittener Text, Wort an falscher Stelle, Effekt erscheint nicht. Die Bilder sind Einzelsamples ohne Unschärfe.

Schritt 5 · Rendern und Prüfung

SKILL_DIR/scripts/render-faisca.sh <projekt> <projekt>/renders/<name>.mp4 [--audio track.wav]
SKILL_DIR/scripts/render-faisca.sh <projekt> /tmp/sabotage.mp4 --sabotieren   # muss FEHLSCHLAGEN

Das Rendern prüft drei Dinge: data-duration = DUR × SLOW, Anzahl Frames bei 60 fps und Vorhandensein der Bewegungsunschärfe (das finale Video muss sich vom Einzelsample in bewegten Passagen unterscheiden). --sabotieren erzeugt ohne Unschärfe und muss mit FEHLER: keine Unschärfe enden: der Beweis, dass die Prüfung fehlschlagen kann. 4 s dauern etwa 1 bis 4 min, je nach Maschine.

npx hyperframes check läuft auch, aber die Layoutprüfung schlägt konstruktionsbedingt an: Untertitelwörter,

die noch erscheinen werden (transparent, text_not_painted) und überlappende 3D-Ebenen (content_overlap). Erforderlich: Lint mit 0 Fehlern; diese Layout-Funde sind erwartet.

Schritt 6 · Lieferung

• Das MP4 übergeben und sagen, wo es liegt.
• Berichten, was anders ist als gewünscht, nichts verheimlichen.
• Studium eines Videos von einer anderen Person: Der Side-by-Side-Vergleich dient nur dem Studium; nicht veröffentlichen.

Bereits bezahlte Fallen

Symptom	Ursache und Behebung
Prozeduraleffekt verschwindet oder hängt auf Einzelbildern	draw(t) speicherte Zustand oder maß das DOM. Muss reine Funktion von t sein; Messung in build()
Balken zittert und hört auf zu steigen	draw schrieb style.transform auf dasselbe Element, das GSAP animiert. Zittern geht in ein Kind (#rbInner)
Verstecktes Element erscheint nie im Render	fromTo mit opacity: 1 nur im „von“. opacity: 1 auch im Ziel setzen
Untertitel-Pille unsichtbar	z-index: -1 ohne Stacking-Kontext. isolation: isolate auf dem Wort
Testbild zum falschen Zeitpunkt	--at des Snapshots ist Zeit der gestreckten Timeline. quadros.sh verwenden, das mit SLOW multipliziert
Ringe beim finalen Zoom	8 Samples reichen nicht für exponentielle Skalierung. SLOW = 16 (und data-duration entsprechend)
Referenzfarbe aufgenommen sieht anders aus	Kamera filmt Bildschirm -> Farbe übersteuert. Ursprungsfarbe verwenden, nicht das Sample
Testbilder alle gleich (nur Hintergrund)	Das Werkzeug fotografierte, bevor build() fertig war. quadros.sh wartet bereits 20 s
Render langsam oder hängt	temporäre Teile in synchronisiertem Ordner. Die Skripte nutzen MOTION_TMP oder den temporären Ordner des Systems
Render verlangt zig GB Festplatte	parallele Aufnahme speichert jedes Frame. render-faisca.sh aktiviert bereits HF_CAPTURE_PARALLEL_STREAM=true
className oder textContent werden von GSAP nicht geändert	GSAP 3 wendet diese Eigenschaften nicht über set an. Änderung in draw(t) als Funktion von t
Mit translateX(-50%) zentriertes Element verschiebt sich	Die GSAP-Skalierung überschreibt transform. Mit xPercent: -50 zentrieren