Hive-RSI-Lab/video

Ein Video erstellen

Nimm keine Bildschirmaufnahme. Eine Aufnahme ruckelt, sobald der Rechner ausgelastet ist, und niemand kann sie nach einer Korrektur erneut abspielen. Schreibe den Film stattdessen als Skript. Das Tool führt die Seite auf einer virtuellen Uhr aus und nimmt ein Bild pro 1/30 Sekunde Seitenzeit auf, sodass jede Animation, jeder Timer, jeder Scrollvorgang und jeder getippte Buchstabe auf den exakten Bildern landet. Kamerabewegungen, der Cursor und Klickringe werden anschließend über die Bilder gezeichnet. Das gleiche Skript erzeugt immer den gleichen Film.

Der Ablauf

1. video new DIR schreibt ein Start-Skript DIR/film.mjs. Richte es auf einen Wegwerf-Server mit erfundenen Daten, niemals auf ein echtes Konto. Schreibe drei bis fünf Szenen mit je einer Idee.
2. heavy timeout 1800 video render DIR/film.mjs OUT/ filmt, codiert jede Szene und setzt die Szenen zum MP4 zusammen. Der erste Rendervorgang führt zuerst video check aus. Ein Rendervorgang schlägt fehl, wenn eines der Wörter auf der Verbotsliste auf dem Bildschirm erscheint.
3. video sheet OUT/film.mp4 OUT/sheet.png 16, dann sieh dir das Kontaktblatt an. Die meisten Fehler zeigen sich erst hier: eine Liste, die nie gescrollt wurde, ein leeres Panel, die Kamera auf dem falschen Objekt.
4. video stutters OUT/film.mp4 muss 0 Ruckler melden. Ruckler sind schnelle oder sprunghafte Bewegungen. Ein Ruckler ist in Ordnung, wenn der Inhalt absichtlich wechselt (ein Seitenwechsel, das Eintreffen einer Nachricht); mit --allow A-B werden diese Bereiche übersprungen.
5. video mp4 IN OUT.mp4 erzeugt das Web-MP4 (H.264, faststart). video gif IN OUT.gif --max 3 verkleinert die Breite von 960 px, bis das GIF unter 3 MB passt.
6. Ändere die Zeitabläufe ausschließlich im Skript, niemals durch Trimmen des Videos.

Das Tempo und die vollständige Regie-API finden sich in kit/KIT.md; lies es vor deinem ersten Film. Kurz gefasst: etwa 20 s insgesamt; die Sache funktioniert innerhalb von 2 s; eine Kamerabewegung pro Szene (1,5- bis 2-fach, 0,4–0,7 s); ein Ergebnis mindestens 0,8 s halten (d.show); mit etwa 30 Tasten pro Sekunde tippen.

Was es flüssig macht (auf die harte Tour gelernt)

• Nur filmbezogene Optimierungen in ein Init-Skript, nicht in die App. Lasse neue Elemente einblenden (animation: in .4s cubic-bezier(.16,1,.3,1) von opacity 0 und translateY 12px), anstatt sie plötzlich erscheinen zu lassen. Bei einer Liste, die an ihr Ende springt, umgebe den Setter von Element.prototype.scrollTop, sodass er über etwa 500 ms dorthin gleitet. Der Hive-Stars-Demofilm ist ein ausgearbeitetes Beispiel dafür.
• Steuere eigene Bewegungen mit setTimeout. Die Uhr des Films führt Timer exakt aus. requestAnimationFrame-Callbacks können ausgelöst werden, während die Uhr pausiert ist.
• Beachte den Zeitstrahl der Seite. Wenn die App auf Timer reagiert (vorgefertigte Antworten bei 0,7 s, 1,8 s usw.), passe die hold-Dauer jeder Szene daran an, sodass eine Szene genau nach dem gezeigten Inhalt endet.
• zoom und Viewport-Einheiten. Der Regisseur filmt mit zoom: 1.5 ein 1280x720-Layout bei 1920x1080. Chrome teilt vh/dvh/vw nicht durch die Zoomstufe des Wurzelelements, daher schreibt das Tool diese Einheiten in Stylesheets gleicher Herkunft um. Ohne das wäre ein calc(100dvh - x)-Layout 1,5-fach zu hoch und sein Scroller würde nie scrollen. CSS von fremden Ursprüngen wird nicht umgeschrieben; serviere die Seite daher selbst.
• Apps, die Date patchen. Das Tool liest die Uhr über seine eigene gespeicherte Date, sodass eine Seite, die Date umschließt (eine Zeitverschiebung, eine gefälschte „Jetzt“-Zeit), pauseAt nicht rückwärts laufen lassen kann.
• Die Verbotsliste: Hostname, Benutzername, Git-Name und -E-Mail, echte Projektnamen. Nur erfundene Daten.

3D-Aufnahmen (Blender)

video blender SHOT.py OUT/ [--quality preview|final] rendert ein Szenenskript auf der CPU. Führe es unter deinem Job-Limiter aus (heavy auf H2), und verwende zuerst --quality preview, da ein finaler Render mehrere Minuten pro Filmsekunde dauern kann. Die Hilfsmittel (Ein-/Ausblendungen, Kamera mit Tiefenschärfe, Lichtsetup, eine Platine aus KiCad, GDS-Extrusion, eine UI-Ebene, Knotengraphen) sind in kit/blender/README.md beschrieben. Codiere die Bilder mit dem encodeFrames-Hilfsmittel des Tools oder ffmpeg und füge sie dann mit stitch ein.

Terminals

kit/term.mjs zeichnet eine echte tmux/bash-Sitzung in einer Sandbox mit einem erfundenen Home-Verzeichnis und Hostnamen auf und spielt sie dann mit xterm.js auf der Film-Uhr ab. Siehe kit/KIT.md.