Motion
Lies zuerst das Skill /hyperframes (Render-Vertrag) und dann brand/DESIGN.md. Das Produktionsverzeichnis ist eine Kopie von templates/base/.
Basis
templates/base/index.htmlenthält bereits: Farbvariablen, Schriftarten, den 3D-Interface-Plan (#world), den Stil der Glaskarten, Caches und Pins. Behalte diese Klassen bei, erfinde keinen neuen Stil.- Eine Szene pro Unterkomposition in
compositions/, wenn der Film länger als 10 s ist (der Root behält nur die Szenen-Hosts, das Audio und die Hintergrundwelt). - GSAP lokal (
assets/js/gsap.min.js). Niemals CDN: Das Rendern erfolgt offline. - Schriften:
@font-faceverweist aufassets/fonts/.
Bewegung (Studio-Werte)
| Aktion | Wert |
|---|---|
| Text, der erscheint | aus einem Cache: yPercent 110 → 0, 0,7 bis 0,85 s, expo.out, Zeilen mit 80 ms Abstand |
| Text, der verschwindet | yPercent 0 → -110, 0,36 bis 0,4 s, power3.in |
| Glaskarte, die erscheint | y +1250 → 0, 1,1 s, expo.out |
| Pins | y 26 → 0 + Opazität, 0,6 s, expo.out, 70 ms Abstand |
| Linie | scaleX 0 → 1 von links, 0,7 bis 0,8 s, expo.out |
| Interface-Plan | kontinuierliches lineares Scrollen, rotationX 56, rotationZ -20 |
| Spiegelung auf Glas | einmal pro Film, 1,3 s, power2.inOut |
| Zähler (Zahlenanimation) | 0,9 bis 1,4 s, power3.out, Endwert gerundet und gehalten |
Technische Verbote: letter-spacing, width, top, left animieren; ein transform-CSS auf einem Element, das GSAP animiert; filter: blur auf Titeln; jeglicher Halo oder Verlauf im Hintergrund (siehe DESIGN.md).
Echte Interfaces
Um eine App zu zeigen, verwende einen echten Screenshot (npx hyperframes capture <url> --json für eine öffentliche Seite wie mescentimes.cloud) oder baue den Bildschirm in HTML mit echten plausiblen Daten in FCFA nach. Niemals gefälschte Kundenlogos.
Prüfen und rendern
npx hyperframes check --json # null Fehler
npx hyperframes snapshot --at <Schlüsselbild> # jedes Bild ansehen
npx hyperframes render --output renders/<slug>.mp4
Nach dem Rendern: 6 Bilder auf dem Handy extrahieren (ffmpeg -ss T -i … -vf scale=540:-2) und vor der Auslieferung kontrollieren.