codeswithroh/motion-lab

Motion Lab

Ein gerichteter Bewegungsfilm: jedes Adjektiv wird zu einer Zahl, jede Nachfrage wird zu einer messbaren Notiz, und der Film zeigt die echte Sache in Aktion. Referenz-Build: examples/cofoundr/ in diesem Skill (SPEC.md, compositions/, REVIEW.md, preview.mp4). Lies es vor deinem ersten Build in einer Session.

Lade hyperframes für den Render-Vertrag, dann folge diesen Schritten. hyperframes-Regeln gewinnen beim Format; dieses Skill gewinnt bei Geschichte, Look und Prozess.

1. Lies die Quelle

Bevor du etwas schreibst, lies das Thema selbst: Repo, README, die Hauptroute oder Pipeline-Datei, Preise, die Live-Seite. Extrahiere:

• den Mechanismus: die echten Schritte in Reihenfolge (Funktionsnamen, API-Aufrufe, Stufen).
• die echten Zahlen: Datensatzgrößen, Zählungen, Gewichte, Zeitvorgaben, Grenzen. Erfinde niemals eine. Ein Wert, den die Quelle nicht angibt, wird entweder gestrichen oder als illustrativ in REVIEW.md markiert.
• die Marke: Akzent-Hex, Zweitfarbe, Logo-SVG, Schriftarten, jede Style-Lock-Datei.
• ein überraschendes Detail, das ein Entwickler zitieren würde (eine Begrenzung, eine Fallback-Kette, ein Bug, der ausgeliefert wurde).

Wenn die Person eine Technologie nennt, die die Quelle nicht verwendet (einen Sponsor, ein Tool aus einem Tweet), zeichne sie nicht. Sage es und frage, was sie tut.

2. Schreibe SPEC.md (das gerichtete Prompt)

Das vage Prompt („cool, Premium, modern“) bekommt dunkles Navy, Glow-Ringe, Partikel und einen erfundenen Claim. Das gerichtete Prompt bekommt den Film. Schreibe SPEC.md im Projektstammverzeichnis aus references/spec-template.md. Jede Zeile ist eine Zahl:

• ZIEL, AUSGABE (1080x1080, 60 fps Standard für X), ZEIT (Sekunden x 60 = Bilder).
• LOOK: Hintergrund, Tinte, gedämpfte Tinte, Regel-Farbe, Akzent und was es bedeutet, Display- und Text-Flächen mit px-Größen und Zeichenabstand, Kartenradius und Schatten.
• OBJEKTE: jedes Ding, das der Betrachter erkennen muss, gezeichnet aus der echten Benutzeroberfläche des Produkts.
• BEWEGUNG: Easing nach Rolle, Dauern und Staffelungen in Bildern (references/numbers.md).
• EINSTELLUNGEN: Bildbereiche, eine Heldenbewegung pro Einstellung, was der Betrachter liest, die Übergabe zur nächsten Einstellung.
• VERBOTEN und QA (die zu prüfenden Bilder und was jedes zeigen muss).

3. Geschichte-Struktur (was den Cofounder-Film zum Erfolg gemacht hat)

1. Hook auf Bild 0. Das erste Bild ist das Thumbnail. Die Hook-Zeile ist bereits darauf platziert, in der Display-Serife, linksbündig, ein Wort im Akzent. Eine große Markenform sitzt daneben. Beispiel: „i couldn‘t find a cofounder.“ mit dem blauen Kreis.
2. Ein durchgehendes Beispiel durchläuft den gesamten Mechanismus. Eine echte Eingabe (die LinkedIn-URL des Benutzers, eine echte Abfrage) betritt eine Produktkarte und bewegt sich durch jede Stufe. Die Form aus dem Hook wandert in die Karte (sie wird zum Avatar), sodass der Betrachter den Faden nie verliert.
3. Eine Stufenleiste oben benennt die echten Stufen („enrich you, search 700M, score 30, write intros“) und leuchtet jeden Knoten auf, sobald das Bild ihn erreicht. Das ist das Architekturdiagramm, eingebaut in den Film.
4. Jede Stufe bekommt ihre eigene Bildform: ein getipptes Feld, ein Feld von Punkten, das sich von 700M auf 30 verengt, Balken, die nach Punktzahl sortiert sind, wobei die Top 10 im Akzent gehalten werden, eine Ergebniskarte, die ihre Ausgabe tippt. Ähnliche Zeilen bekommen nie das gleiche Bild.
5. Ausklang = das Logo bedeutet etwas. Die beiden Formen (du und der Treffer) gleiten zum Logo zusammen, der Wortmarke blenden ein, eine Zeile mit den Schlüsselzahlen. 2 s+ halten, absolut still.

Länge 15–17 s. Unter 15 s, wenn die Person eine Schleife möchte.

4. Look

Standardmäßig die helle App-Hülle des Produkts verwenden, kein dunkles Void: Hintergrund wie #f0f2f8, weiße Kartenradius 28 mit 0 18px 40px rgba(15,23,42,.08), Tinte #0f172a, gedämpft #64748b. Display: die Serife der Marke (herunterladen in assets/fonts/, @font-face in jeder Szene, die sie verwendet). Text: Inter 500/700. Text wird mindestens auf 28 px gelesen. Der Akzent markiert einen Fokus pro Bild.

Verboten: dunkles Navy-Void, Glow, Bloom, Neon, Partikel, lila/blaue Verläufe, Glaskarten, Monospace-Großbuchstaben-Label, Pill-Chips, alles zentriert, jedes Element, das nach oben ausblendet, Titel, die nach dem Landen abdriften, das Logo in einer Ecke verankert, drei Karten in einer Reihe, KPI-Raster, echte Gesichter oder Namen als gefälschte Kandidaten.

5. Bauen

• npx hyperframes init <dir> in <slug>-video/. Das Root-index.html mountet 3 Szenen: hook, die Mechanismus-Szene (eine durchgehende Rahmung, während die UI agiert), payoff.
• Jeden Zufall seeden (mulberry32). Generierte Punkte und Balken sind Kinder einer getimten Szene.
• fromTo für jedes Tween; immediateRender: false bei wiederholtem fromTo desselben Ziels nach dem ersten.
• Einen Time-Shift-Helfer behalten (const at = (t) => t + …) in der Mechanismus-Szene, sodass eine Umzeitung eine Zeile ist, nicht zwanzig.
• Text, der sich ändern kann (die URL, die Schlagzeile) kommt in Kompositionsvariablen.

6. Der Labor-Loop (Nachfassaktionen mit Belegen)

Nie dem ersten Build vertrauen. Nach jedem Durchlauf:

1. npx hyperframes check --json; jeden Fehler beheben. line_unread bedeutet die Linie länger halten (0,5 s + 0,3 s pro Wort) oder Wörter kürzen; nie die Schrift verkleinern.
2. npx hyperframes snapshot --at <Mitte und Ende jeder Einstellung> und das Kontaktblatt lesen.
3. Jedes Problem als nummerierte Nachfassaktion mit Zahlen notieren, so wie die Referenz sie zeigt: „Das Need-Tag ist 0,56 s auf dem Bildschirm, Mindestdauer 1,27 s: lande es bei 0,9 s und verschiebe alles nach 1,6 s um +0,6 s“. In REVIEW.md protokollieren.
4. Nach dem Rendern Nahlosen aus dem MP4 selbst extrahieren (ffmpeg -vf "select='eq(n\,F1)+eq(n\,F2)',scale=360:-1,tile=Nx1") und betrachten.

7. Musik

Den Track verwenden, den der Benutzer angibt (kopieren nach assets/audio/). Ohne einen, nach einem fragen oder eine Partitur bieten, die aus Bildnummern synthetisiert wird (references/sound.md).

1. python3 scripts/find_drop.py <track> gibt die Lautheitskarte und die größten Drops mit ihrem genauen Einsetzen und den umgebenden Beats aus.
2. Den Helden-Moment des Films wählen (die Logo-Formen berühren sich, das Ergebnis landet). Das Bild berechnen, auf dem es tatsächlich passiert (bei back.out(1.4) berühren sich die Formen bei ~23 % des Tweens).
3. data-media-start = Drop-Einsatz − Helden-Zeit, auf den nächsten Beat gerundet, damit der Film auf einem anfängt. Sound landet 0–1 Bild nach dem Bild, niemals davor.
4. <audio id="music" class="clip" data-start="0" data-duration="<film>" data-media-start="…" data-volume="1" data-fade-in="0.05" data-fade-out="1.2">.
5. Rendern, dann messen: npx hyperframes audio <mp4> --json muss einen Einsatz innerhalb eines Bildes des Helden-Bildes zeigen; Lautheit −16 bis −14 LUFS, Spitzenpegel ≤ −1 dBTP. Sage, dass gemessen wurde, nicht gehört.

8. Ausliefern

• npx hyperframes render -f 60 -q delivery -o renders/<slug>.mp4, dann ffprobe für Größe, fps und Bildanzahl.
• Das MP4 an den Benutzer senden.
• REVIEW.md: kreative Entscheidungen, was gemessen wurde, der schwächste Beat, Warnungen, die absichtlich beibehalten wurden.
• Den Post in der Stimme des Benutzers entwerfen (Standard: Kleinbuchstaben, Hook zuerst, kurze Zeilen, der Mechanismus als >-Schritte, ein echtes Detail aus dem Code, keine Hype-Wörter). Niemals posten.