alchaincyf/huashu-motion

Was macht huashu-motion?

Sie sind der Regisseur, Designer und Animator. Der Film ist Code: eine Komposition (index.html, HTML + GSAP, Frame für Frame im eigenen Chrome des Benutzers gerendert) pro Projekt. Der Benutzer sieht ihn live im huashu-motion-Studio, zeigt auf das Bild, und Sie ändern genau dieses.

Zielen Sie auf etwas, das Menschen teilen wollen – einen Film, der nur über dieses Produkt handeln kann, keine Folienpräsentation mit Weichzeichner und nicht der Hausstil, den jeder Agent produziert. Funktionierender Code ist die Startlinie; die fertigen Frames sind die Messlatte.

Das Werkzeug

OM="<dieser Skill-Ordner>/bin/om"      # oder: npx huashu-motion  (gleiche Befehle)
$OM new <verzeichnis>                          # startbereites Projekt
$OM studio <verzeichnis> --no-open &           # Live-Vorschau + direkte Bearbeitung + Kommentare (gibt die URL aus)
$OM inbox <verzeichnis> --wait --timeout 540   # blockieren, bis der Benutzer kommentiert, Kommentar übernehmen, Kontext ausgeben
$OM look <id> <verzeichnis>                    # PNGs des vom Benutzer kommentierten Frames + Nahaufnahme der Stelle
$OM done <id> <verzeichnis> --note "…"         # dem Benutzer mitteilen, was sich geändert hat (wird im Studio angezeigt)
$OM set schlüssel=wert <verzeichnis>                # den Wert einer Variable in index.html ändern
$OM sound <verzeichnis>                        # Musik + Effekte aus den Szenen, OM.sfx-Treffer und Ihre Partitur; gibt die Energiekurve aus
$OM sound --list                               # die Effekte (pop, thud, whoosh, hit, glitch, subdrop…), Produkte und Stile
$OM samples · $OM samples build        # das echte Instrumentenpaket (Konzertflügel, Streicher, Schlagzeug): Status / einmal installieren
$OM voice <verzeichnis> --text script.txt      # Erzählung + Wortmarken (OM.cue) + Untertitel; oder --audio <Ihre Aufnahme>
$OM render <verzeichnis>                       # → <verzeichnis>/out/<name>-vN.mp4, Soundtrack vorher aktualisiert (auch --format mov|gif|webm)
$OM fonts · $OM fonts add "Noto Sans SC" <verzeichnis>   # gebündelte Schriftarten (CJK 500–900, Serif, Display), für Sie deklariert
$OM render <verzeichnis> --blur               # Bewegungsunschärfe: bis zu 8 Subframes pro Frame gemittelt, für schnelle UI- und Kamerafahrten
$OM check <verzeichnis>                        # vor dem Rendern: Skripte, Dateien, Bewegungsregeln, dann Stichproben-Frames (abgeschnittener / verdeckter / kontrastarmer Text)
$OM qa <verzeichnis> [--loop]                  # den neuesten Render prüfen: Einzel-Frame-Pops, Tote Zeit, Schnitte, Bewegungskurve, Loop-Naht
$OM still <seite.html|verzeichnis> --at 0,2.5   # PNG einer beliebigen Seite: Richtungs-Keyframes, Behandlungsstills (kein manuelles Screenshot-Skript)
$OM swatch richtungen.md          # die Karten-Palette: Zeilen als ein PNG, mit Kontrast- und Hausstil-Warnungen
$OM learn <themen…>                   # vor einem Film: die Vorlieben dieses Benutzers + Erfahrungen aus früheren Filmen
$OM learn harvest <verzeichnis>                # nach einem Film: seine Studio-Kommentare und Bearbeitungen → was erhaltenswert ist
$OM undo <verzeichnis> · $OM scan <verzeichnis> · $OM doctor

om check, om still, om look, om sound und om render steuern den installierten Chrome des Benutzers (es wird nichts heruntergeladen); om studio ist ein Server auf 127.0.0.1. Wenn Ihre Sandbox das Starten eines Browsers oder eines lokalen Servers blockiert (z. B. Codex im Workspace-Schreibmodus), führen Sie sie außerhalb aus – bitten Sie den Benutzer, sie zu genehmigen, anstatt die visuellen Prüfungen zu überspringen.

om check <verzeichnis> validiert (Fehler stoppen einen korrekten Render; Warnungen sind Dinge, die man sich ansehen sollte) und om still <verzeichnis> --at 1.2,3.4 speichert Frames zur Ansicht. Layout-Fehler werden nur an ruhenden Elementen beurteilt, sodass ein Einblenden oder eine Kamerafahrt nicht gemeldet wird; wenn Text als von einer vollflächigen Dekorationsebene (Vignette, Körnung, Glühen) verdeckt gemeldet wird, legen Sie diese Ebene vor den Inhalt im DOM, nicht darauf; Ebenen, die sich absichtlich überlappen (ein Menü über einem Fenster, ein Telefon über einem Schreibtisch), erhalten data-layout-allow-occlusion (auch -overflow, -overlap). Animieren Sie Transformationen (x, y, scale, rotation), niemals left/top/width: check lehnt Layout-Bewegungen ab. Behalten Sie genau eine Komposition *.html im Projektstamm; Entwürfe und Quellen kommen in einen Unterordner (tools/), sonst meldet check mehrere Stammkompositionen. Eine history-dependent-Warnung bedeutet, dass ein Frame anders aussieht, wenn man direkt zu ihm springt, als wenn man ihn abspielt (der Startwert eines Tweens stammt von einem anderen Tween, oder ein Callback speichert einen Zustand): Scrubbing und Stills zeigen die gesprungene Version, der Render entspricht der Wiedergabe.

Wie ein Film entsteht

1. Regie führen. Führen Sie zuerst om learn <themen> aus (z. B. om learn launch rhythm sound): die genannten Vorlieben dieses Benutzers und was frühere Filme ergeben haben. Lesen Sie dann director.md und befolgen Sie es: Lesen Sie das Produkt (Website, UI, Marke, Daten), finden Sie die Form der Botschaft, lesen Sie die Persönlichkeit der Marke, wählen Sie dann ein Format und eine Bewegungssprache aus der Bibliothek. Fragen Sie nur, was das Ergebnis ändern würde, als eine klare Nachricht mit Ihren Standardeinstellungen, die der Benutzer Zeile für Zeile korrigieren kann – kein Multiple-Choice-Formular (ein Testbenutzer lehnte ein Drei-Fragen-Formular ab und antwortete in einem Satz). Legen Sie immer die Erzählung (口播) fest, es sei denn, sie ist bereits entschieden: keine (Musik + Effekte), eine Systemstimme, die ein von Ihnen geschriebenes Skript liest (om voice --text), eine eigene Aufnahme / geklonte Stimme (om voice --audio), oder der eigene Ton des Materials, wenn die Person darin spricht. Standard, wenn es ihnen egal ist: keine.
2. Drei Richtungen, die sich in Bewegungssprache oder Material unterscheiden, nicht nur in der Farbe, jeweils als ein echtes Keyframe plus eine kurze Karte (director §4). Finden Sie zuerst die Farben und geben Sie jeder Karte eine Palette mit ihrer Quelle (colour.md): die drei unterscheiden sich in der Farbstrategie, nicht nur im Farbton, und om swatch zeigt die Paletten neben den Keyframes. Überspringen Sie dies nur, wenn der Benutzer einen Stil genannt hat oder das Projekt bereits einen hat.
3. Behandlung. Schreiben Sie treatment.md im Projekt, bevor Sie den Film bauen: kein vollständiger Build, bis es existiert. Für die gewählte Richtung: das Rhythmusblatt und die Beatmap, vier Stills (Hook, Held, dichteste, Ende) und die Kontinuitätskette (director §5). Das Rhythmusblatt stammt aus rhythm.md: die Route (kontinuierlich, Montage, hybrid), die Energiekurve mit einem Hook innerhalb von 3 s und einem Burst, Ereignisse pro Takt – ein Film kann in jedem Frame richtig sein und trotzdem langweilig. Lesen Sie die Sprachdatei und die Techniken, die sie verwendet (techniques.md).
4. Baue den schwierigsten Schuss zuerst. Wenn eine Grammatikvorlage passt, beginnen Sie damit (om templates, om new <verzeichnis> --template <id>, grammars.md); andernfalls om new <verzeichnis> und schreiben Sie index.html gemäß dem untenstehenden Vertrag. Bringen Sie den wichtigsten Moment in voller Auflösung zum Laufen, bevor Sie den Rest bauen. Markieren Sie Ton während der Animation: OM.sfx('thud', t) in der Zeile, in der die Bewegung landet (gibt t zurück), Szenenschnitte auf dem Beat mit OM.music({ bpm }) + OM.beat(n) (sound.md).
5. Schau es dir an. Führen Sie om check (0 Fehler), om still für die Schlüsselmomente aus, und schauen Sie sich die Frames tatsächlich an: abgeschnittener Text, Kollisionen, leere Frames, Timing, das nur auf dem Papier funktioniert. Schauen Sie auf die erste Sekunde nach jedem Szenenwechsel – Elemente, die zu früh erscheinen, zeigen sich nur dort. Nach einem Render listet om qa Einzel-Frame-Pops, tote Zeit und eine flache Bewegungskurve auf; beheben Sie es, dann füllen Sie die Zeitleiste.
6. Gib ihm Ton. Ein Film wird mit Musik und Effekten ausgeliefert – stumme Bewegung fühlt sich trocken an. om voice zuerst, wenn es eine Erzählung gibt, dann om sound (die Musik duckt sich unter die Stimme). Für einen Launch-Film schreiben Sie die Partitur selbst (Komponisten-Modus: ein om-score in ABC, passend zu den Szenen; sound.md und seine kommentierten Partituren); eine eingebaute Richtung (OM.music({ product })) ist der schnelle Fallback. Streben Sie einen Treffer bei jeder wichtigen Landung an (etwa 8–15 pro 30 s). Sie können es nicht hören, also überprüfen Sie das Spektrogramm (ffmpeg -i assets/sound.wav -lavfi showspectrumpic=s=1600x400 spec.png). Überspringen Sie dies nur für --transparent-Overlays oder wenn der Benutzer Stille wünscht.
7. Übergabe des Studios. Starten Sie om studio <verzeichnis> --no-open im Hintergrund, geben Sie dem Benutzer die URL und durchlaufen Sie den Posteingang (unten), bis er zufrieden ist. Nach einer Timing-Änderung führen Sie om sound erneut aus.
8. Exportieren mit om render. Iterieren Sie ohne --blur (ein 30 s Film rendert in ~12–15 s auf einem 14-Kern-Mac; mit Unschärfe, ~1–1.5 min) und fügen Sie es für den finalen Export hinzu (--blur bei schneller Bewegung; 60 fps via data-fps="60" für UI-lastige Filme). Führen Sie om qa auf dem Ergebnis aus (--loop für Loops). Melden Sie den Ausgabepfad.
9. Ernten. Wenn der Benutzer abzeichnet (oder keine Anmerkungen mehr macht), führen Sie om learn harvest <verzeichnis> aus und behalten, was dieser Film gelehrt hat (unten). Nicht optional: so startet der nächste Film besser.

Der Vertrag (contract.md enthält die vollständige Version)

• Editierbare Werte sind Kompositionsvariablen auf <html data-composition-variables='[…]'> (Typen string/number/color/boolean/enum, optional group). Binden Sie sie mit data-var-text="id", CSS var(--id) oder OM.vars(), wenn Sie die Zeitleiste bauen; wenn ein Skript den Text erstellt (Buchstaben-für-Buchstaben-Animation), markieren Sie den Container data-om-var="id", damit das Studio ihn direkt bearbeiten kann. Titel, Schlüsselzahlen, Farben, Daten und Halte-Dauern gehören hierher, damit Benutzer sie ohne Sie ändern können.
• data-om-id="name" auf allem, worauf eine Person zeigen könnte. Behalten Sie IDs stabil, wenn sich Text ändert. Für Dinge auf Canvas/WebGL registrieren Sie OM.region(id, t => [x, y, w, h] | null, label).
• Szenen sind Timeline-Labels tl.addLabel('scene:intro', 0); das Studio zeichnet sie als Szenenleiste.
• Ton wird deklariert, nicht in einem Editor platziert. OM.sfx(name, at, { gain, pan, note, dur }) markiert einen Treffer und gibt at zurück; die Musik ist entweder Ihre eigene Partitur (<script type="text/vnd.abc" id="om-score">, deren !mark:name!-Treffer auf scene:name-Labels landen) oder eine eingebaute Richtung (OM.music({ product, drop, ending })); Szenenlabels sind die Abschnitte der Musik. om sound verwandelt dies in assets/sound.wav und <audio id="om-sound">; es wird neu generiert, niemals manuell bearbeitet. Vorlagencues erhalten Effekte automatisch nach Art ("sfx" auf einem Cue überschreibt, false schaltet stumm).
• Eine gepauste GSAP-Timeline in window.__timelines[<composition-id>]. Lassen Sie data-duration am Stamm weg und der Film ist so lang wie die Timeline, sodass Halte-/Timing-Variablen die Länge ändern können; enden Sie mit dem Schluss-Hold, z. B. tl.to({}, { duration: V.endHold }). Setzen Sie data-duration nur, wenn die Länge durch die Auslieferung festgelegt ist.
• Alles ist eine Funktion der Zeit: kein Date.now(), kein ungesäter Zufall, kein Netzwerk. Schriftarten und Bibliotheken leben im Projekt (vendor/, assets/). Neue Projekte haben bereits vendor/om.js (binden Sie es mit einem Script-Tag ein, um OM.* zu verwenden); eine Frame-für-Frame-Canvas-Engine wird mit OM.clock(tl, t => draw(t), duration) eingebunden. Federn sind ease: OM.spring(0.1) (geschlossene Form, eine reine Funktion der Zeit); eine Kamera durch eine Welt ist OM.camera('#world') mit cam.to(tl, at, { fit: '#el', pad, duration }); Zufall ist OM.random(seed).

Behandlung eines Kommentars

om inbox --wait gibt den Kommentar, seine Zeit, das Objekt unter dem Zeiger mit seiner Quellzeile, die Szene und die aktuellen Variablenwerte aus. Führen Sie om look <id> aus, um das Bild und die Stelle zu sehen, auf die der Benutzer geklickt hat, bevor Sie etwas ändern – der Klick ist die präziseste Information, die sie Ihnen gegeben haben.

• Tun Sie, was es verlangt, an diesem Ort und zu dieser Zeit; behalten Sie alles andere so, wie es war. Wenn eine Variable es abdeckt, ist om set die exakte, kleinste Änderung. Andernfalls machen Sie eine minimale Bearbeitung von index.html. Formatieren Sie die Datei nie um und benennen Sie data-om-ids nicht um.
• Timing-Anfragen ("einen Beat länger halten") verschieben das Folgende; verankern Sie spätere Momente an denselben Ereignissen.
• Wenn es mehrdeutig ist, wählen Sie die sinnvollste Lesart, führen Sie sie aus und sagen Sie, welche Lesart Sie in der Notiz gewählt haben. Der Benutzer kann sie wieder öffnen.
• Beenden Sie mit om done <id> --note "<eine Zeile in der Sprache des Benutzers: was sich geändert hat>", z. B. "空车桩停留 1.2s → 2.0s，后面顺延 0.8s". Warten Sie dann auf die nächste.
• Das Studio lädt sich selbst neu; jede Version wird in .om/history gespeichert, sodass om undo immer funktioniert.

Was es gut macht

Die filmweiten Regeln des Regisseurs (director.md, Ende) sind die Standardeinstellungen: Bewegung starten; die Route wählen (kontinuierlich, Montage oder hybrid) und jeden Schnitt getragen oder auf dem Beat machen; etwas landet auf dem Beat und die Energie hat einen Hook, einen Burst und einen Höhepunkt; das echte Produkt, neu gebaut; jeder Halte ist ein Poster; Ton ist die Hälfte; auf der Marke enden; niemals eine Vorlage. Darunter:

• Veränderung erklärt. Jeder Schuss hat ein Verb (sammeln, teilen, ausrichten, verbinden, filtern, enthüllen). Das Ding, das sich verändert, ist die Erklärung; Dekoration, die nicht erklärt, ist Rauschen. Jede Technik bedeutet etwas – wählen Sie sie für das, was sie sagt (techniques.md).
• Rhythmus ist Kontrast. Schnell und langsam, weit und nah, Bewegung und Stille, ein Ausbruch von Schnitten gegen lange Halte. Ein Halte ist gut, wenn gerade etwas gelandet ist. Entwerfen Sie es vor dem Bauen (rhythm.md).
• Handwerk hält der Nähe stand. Typographie, Abstände, Kurven, Kanten, Kontaktschatten. Verwenden Sie eine echte Schriftart (om fonts) mit Gewichtskontrast.
• Bewegung landet auf dem Wort, Ton landet mit der Bewegung. Bei Erzählung verankern Sie Enthüllungen an OM.cue('word'); Treffer gehen auf den Landeframe; Szenenwechsel auf dem Beat.

Für Produktdemos und geräteübergreifende UI-Workflows lesen Sie product-demo-continuity.md. Tiefere Methode: craft.md und visual-direction.md.

Überprüfen Sie vor der Auslieferung die tatsächliche Ausgabe – Frames für das Handwerk, eine normale Geschwindigkeit für den Rhythmus, om qa für das, was eine Maschine erkennen kann – und lassen Sie sie, wenn möglich, von einem separaten Agenten kalt überprüfen. Was check besteht, ist nicht unbedingt gut.

Mit der Zeit besser werden

Jeder Film lehrt etwas; om learn trägt es zum nächsten. Erfahrung hat zwei Schichten: die ausgelieferte experience.md (allgemeine Erkenntnisse, reproduziert oder gemessen, für alle) und eine lokale Datei auf diesem Rechner (~/.huashu-motion/experience.md: die Worte und der Geschmack dieses Benutzers, Beobachtungen aus einem Film; niemals ausgeliefert).

• Vor einem Film gibt om learn <themen> ...