givemotion/givemotion

givemotion: HTML rein, Video raus

Eine Komposition ist eine einzige HTML-Datei. Jeder Frame ist diese Seite zu einem bestimmten Zeitpunkt. CSS-Animationen, Übergänge, Web Animations, Timer, requestAnimationFrame, Canvas und WebGL werden auf einer virtuellen Uhr ausgeführt, sodass das Geschriebene frame-genau und jedes Mal identisch gerendert wird. Es wird kein Script-Tag oder Import benötigt: Die Laufzeit (window.gm) und ein voreingestelltes Stylesheet werden automatisch eingefügt.

Diese Datei ist der Kern (lies sie ganz). Lies dann nur die 1–3 Technik-Rezepte, die dein Video benötigt (Tabelle am Ende): Jedes zeigt, wie ein Profi diesen Effekt baut, mit Zahlen und einem funktionierenden Beispiel. Schlage alles andere nach, wenn du es brauchst.

Der Workflow

0. Direktion. Bevor es an den Code geht, entscheide, wie ein Top-Studio diese Aufgabenstellung umsetzen würde: Recherchiere das Genre (durchsuche das Web nach echten Beispielen, wenn möglich, sonst rufe sie dir in Erinnerung), schreibe dann oben in die HTML-Datei: die Optik in Worten, das Schriftsystem, die Bewegungssprache (Easing-Familien, Rhythmus, wie Szenen übergeben) und die Shot-Liste (eine Zeile pro Moment: Zeit, was auf dem Bildschirm ist, die Bewegung, die Übergabe). Wie: references/direction.md.
1. Stil-Frames. Baue zuerst die 2–3 wichtigsten Standbilder, unbewegt, und bewerte jedes als Poster (ein Brennpunkt, Hierarchie, Ränder). Dann animiere.
2. Schreibe die Bewegung; npx givemotion check video.html während der Arbeit: Behebe jedes ✖; ⚠ sind echte Fehler, sofern nicht beabsichtigt; ℹ sind Stilhinweise.
3. Zweimal prüfen. npx givemotion review video.html schreibt auf, was ein Zuschauer sieht (Überblick, die Frames, die gelesen werden, Bewegungsstreifen an den aktiven Stellen) und review/REVIEW.md: Bewerte es hart, behebe die fünf schlimmsten Probleme, prüfe erneut. Frische Augen entdecken mehr: Gib einem Sub-Agenten nur die Aufgabenstellung und den Review-Ordner. Trage die Zeiten der Aufgabenstellung in data-expect ein.
4. Rendern: npx givemotion render video.html -o out/video.mp4.

--json für Maschinenausgabe, <command> --help für Optionen. still video.html -t 3.2 -o f.png rendert einen Moment; inspect --at 4.5 --el "#logo" zeigt, wo ein Element ist.

Wie hier gute Bewegung entsteht

Die Engine gibt dir jedes HTML/CSS/SVG/Canvas und eine frame-genaue Zeitachse; den Look erzeugst du durch die Choreografie. Blinde Zuschauer bevorzugten Videos, bei denen jedes Element von Hand choreografiert wurde, gegenüber Videos, die aus Ein-Wort-Voreinstellungen erstellt wurden.

1. Choreografiere von Hand. Verwende gm.timeline für alles, was wichtig ist: explizite Startzeiten, Easing pro Bewegung (ein schneller expo.out-Einschlag, eine weiche sine.inOut-Drift, eine back.out(1.6)-Landung), Abstände von 40–120 ms zwischen zusammenhängenden Teilen. Voreinstellungen (data-enter, data-camera) sind für kleine unterstützende Dinge in Ordnung.
2. Drei Schichten bei jedem Heldenmoment: die Hauptbewegung; das sekundäre Detail, das sie verkauft (Unschärfe bei Schnelligkeit, ein Glühen, ein Schatten, der wächst, Durchschwingen, ein Ring oder Partikel beim Aufprall); und Umgebungsbewegung, damit der Frame niemals eingefroren wirkt (treibender Hintergrund, langsame Kamera-Heranfahrt).
3. Kontrast im Timing. Schnell rein, langsam zur Ruhe kommen; Halte von 0,4–1 s, nachdem etwas gelandet ist; Ausgänge kürzer als Eingänge. Bewege niemals alles mit der gleichen Geschwindigkeit und der gleichen Kurve.
4. Befolge die Aufgabenstellung genau bei Farben, Schriftarten, Text, Größen und Timing; deine handwerkliche Kunst steckt darin, wie sich Dinge bewegen, nicht in zusätzlichem Inhalt.
5. Frame 0 ist der Aufhänger, nichts wird vom Bildrand abgeschnitten, Text ist groß (Titel 96–200 px, Fließtext ≥ 36 px bei 1080p), ein Held pro Moment, Szenen fließen ineinander (Schieben, Peitschen, Morphen, Match Cut) statt auszublenden.
6. Dinge entstehen aus Dingen. Ein neues Element entsteht aus einem, das bereits auf dem Bildschirm ist, nicht aus dem Nichts: drei Kreise quetschen sich aus dem Hauptkreis heraus; eines der Rechtecke auf dem Bildschirm gleitet herüber und wird zur Unterstreichung; eine Karte wächst aus dem Button, der angeklickt wurde; das Zeichen des Logos wird zum Zeichen der Endkarte. Verwende und transformiere, bevor du hinzufügst. Pflanze das nächste Set früh ein: bereits in der Welt (klein, dunkel), während dieser Beat spielt, sodass die Kamera es enthüllt.
7. Eine Kamerabewegung bedeutet „Schau hierher“. Fahre nur auf etwas zu, das der Zuschauer als Nächstes lesen soll. Zoome niemals in leeren Raum oder in die alte Szene als Übergang: Um eine Szene zu verlassen, bewege dich seitwärts (Schieben, Peitschen, Wischen) oder trage ein Element hinüber (Morphping, die obige Regel).
8. Animiere transform/translate/scale/rotate/opacity/filter/clip-path, nicht width/top/left.
9. Jedes Element erhält ein geplantes Leben: rein, ein lesbares Halten (~1 s + 0,25 s pro Wort), dann ein Ausgang oder eine Übergabe. Die Shot-Liste gibt jedem Halten seine Zeit.

Hierarchie: Eine Sache zählt auf einmal

Die Zuschauer bevorzugten Videos, bei denen das Auge immer wusste, wohin es schauen soll.

• Jede Zeile hat ein Schlüsselwort. Gib dem Wort, das die Bedeutung trägt, Kontrast (Akzentfarbe, fetteres Gewicht, größere Größe oder eine aufgemalte Hervorhebung); der Rest bleibt ruhiger. Eines pro Zeile, höchstens zwei pro Bildschirm. Wenn alles Akzent ist, ist nichts Akzent.
• Jeder Moment hat einen Helden: das größte, hellste Ding mit der meisten Bewegung. Unterstützung ist kleiner (Held ≥ 1,6× die nächste Größe; höchstens drei Ebenen), matter (gedämpft oder 50–70 % Deckkraft), kommt nach dem Helden an und bewegt sich weniger. Effekte (Ringe, Funken) umrahmen den Helden, kreuzen ihn niemals.
• Führe das Auge in der Reihenfolge: Der Held landet zuerst; das Schlüsselwort erhält seine Farbe oder Unterstreichung 0,2–0,4 s, nachdem sich die Zeile gesetzt hat; die Unterstützung folgt. Wenn die Kamera oder ein Callout auf etwas fokussiert, dimme den Rest.
• Palettenrollen strikt: Akzent nur für Betonung, gedämpft für sekundären Text.

Easing: Passe die Kurve der Bewegung an

• Eingang verlangsamt (ease-out: expo.out, power3.out oder back.out(1.4), wenn es mit Gewicht landet).
• Ausgang beschleunigt (ease-in: power2.in), kürzer als der Eingang (60–70 %).
• Bewegung von A nach B während sichtbar, Kamerabewegungen, Größenänderung von etwas bereits auf dem Bildschirm: ease-in-out (power2.inOut, sine.inOut): es beginnt sanft und landet sanft.
• Umgebungsdrift: langes sine.inOut; linear nur für Schleifen (Drehungen, Ticker). Nichts, was auf dem Bildschirm startet oder stoppt, bewegt sich linear.
• Lasse ease weg und die Engine macht das bereits (Eingänge federn ein, Bewegungen erleichtern ein- und ausgehend, Ausgänge erleichtern eingehend); wenn du eines setzt, befolge die obigen Regeln.

Minimalkomposition

<!doctype html>
<html data-width="1920" data-height="1080" data-fps="30" data-duration="2.5">
<head>
<style>
  :root { --bg: #0b0d12; --ink: #fff; --accent: #7c9cff; }
  body { background: var(--bg); color: var(--ink); font-family: Inter, sans-serif; }
  .scene { display: grid; place-items: center; }          /* .scene ist bereits absolut + volle Bildschirmgröße */
  h1 { font-size: 160px; letter-spacing: -0.03em; margin: 0; }
  .glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; background: var(--accent); filter: blur(160px); opacity: .25; }
</style>
</head>
<body>
  <section class="scene">
    <div class="glow"></div>
    <h1 id="t" data-split="chars">Hello</h1>
  </section>
  <script>
    gm.timeline('.scene')
      .from('.glow', { scale: 0.6, opacity: 0, duration: 1.2, ease: 'sine.out' }, 0)             // Umgebung: Licht blüht auf…
      .to('.glow', { x: 220, y: -90, duration: 2.5, ease: 'sine.inOut' }, 0)                        // …und treibt weiter
      .from('#t .gm-char', { y: 140, opacity: 0, filter: 'blur(12px)', duration: 0.7, ease: 'expo.out', stagger: 0.05 }, 0.2) // Haupt: schnell rein, verschwommen während schnell
      .fromTo('#t', { letterSpacing: '0.12em' }, { letterSpacing: '-0.03em', duration: 2.4, ease: 'expo.out' }, 0.2)        // Detail: Laufweite verengt sich
      .to('#t', { scale: 1.06, duration: 1.9, ease: 'sine.inOut' }, 0.6);                        // das Halten atmet weiter
  </script>
</body>
</html>

Eingebaute Schriftarten: Inter, JetBrains Mono, Playfair Display, Space Grotesk, Bebas Neue, Nunito, Caveat; andere via @font-face.

Zeitmodell (lies dies)

• Einstellungen leben auf <html>: data-width, data-height (gerade Zahlen), data-fps (Standard 30), optional data-duration, optional data-background.
• Zeiten sind Sekunden: 1.5, 1.5s, 500ms, 45f (Frames), 1:02.5.
• Clips. Ein Element mit data-start, data-duration oder data-end existiert (wird displayed) nur von Start bis Start+Dauer. Zeiten sind relativ zum übergeordneten Clip. Elemente ohne Timing sind immer da.
• Videolänge = data-duration auf <html>, sonst das Ende des letzten Clips.
• Sequenzen. data-sequence auf einem Container spielt seine Kinder nacheinander ab. Jedes Kind benötigt data-duration, oder gib dem Container data-cuts="0 2.13 4.27" (wann jedes Kind beginnt; auch "beats: 0 4 8" / "bars: 0 1 2"). data-gap="0.2" (negativ = Überlappung). data-transition="<name> <sekunden> [easing]" überlappt Nachbarn und animiert den Wechsel; ein Kind kann sein eigenes data-transition setzen (wie es hereinkommt). Jeder Übergang nimmt seine Länge von der Gesamtzeit: 3 Szenen à 4 s mit fade 0.5 dauern 11 s. Schnitte auf dem Beat, data-cut-align, und wo die Zeit 0 einer Szene dann sitzt: references/timeline.md.
• Übergänge: push-/cover-/whip-/wipe- + left/right/up/down (push: Neues schiebt Altes raus; cover: Neues gleitet darüber; whip: schnell, unscharf) diagonal clock iris zoom zoom-through (alte Szene fliegt vorbei) flip (3D) dip (durch Schwarz) blur fade-up fade, und morph: Elemente mit dem gleichen data-morph="name" in beiden Szenen fliegen und ändern ihre Größe von der alten zur neuen Position, während der Rest überblendet. Trägt ein Logo, eine Karte oder eine Zahl hinüber; in einer Szene verwende gm.fly.
• CSS-Animationen laufen auf Clip-Zeit. animation: fade-up .6s .4s both beginnt 0,4 s nach dem Erscheinen des Clips. Verwende both (oder backwards)-Fill, damit das Element vor seiner Verzögerung verborgen ist.
• Etwas erscheint später innerhalb einer langen Szene (eine Kamerawelt, ein Whiteboard): Die Verzögerung in data-enter zählt ab dem Start des Clips des Elements, also schreibt data-enter="write 0.8 11.9" ein Label 11,9 s in die Szene und hält es bis dahin verborgen. Kein zusätzlicher Clip nötig.
• gm.onFrame(fn) bekommt die Video-Zeit, selbst in einer Szene; gm.onFrame('#s', (local, info, el) => …) zählt ab dem Start von #s, wie gm.timeline('#s').
• Timer, requestAnimationFrame, Date.now(), performance.now() sind virtuell und Math.random() ist gesetzt. Normaler Web-Animation-Code funktioniert.

Timeline: Präzise Choreografie (GSAP-Stil, eingebaut)

Für alles mit mehr als ein paar beweglichen Teilen verwende gm.timeline: die GSAP-API, die du kennst, berechnet aus der Zeit (frame-genau, parallel). Zeiten sind Sekunden relativ zum Clip, der den Gültigkeitsbereich enthält.

gm.timeline('#scene2')                                     // Gültigkeitsbereich: Selektoren werden darin gesucht
  .from('.title .gm-word', { y: 120, opacity: 0, rotate: 8, stagger: 0.06 })   // kein Easing: federt ein
  .to('.card', { x: 400, y: -60, scale: 1.2 }, '+=0.3')                 // Bögen, an die Entfernung angepasst
  .fromTo('.bar', { scaleY: 0 }, { scaleY: 1, stagger: { each: 0.08, from: 'center' } }, '<')
  .to('#line', { draw: 1, duration: 1.5 }, 2)                       // SVG-Strich zeichnen
  .to('.price', { textContent: 249, duration: 1.5 }, 2.5);          // Zahl zählen
gm.fly('#event', { from: '#slot2', at: 7.5, duration: 0.8 });      // aus der Box eines anderen Elements an seinen eigenen Platz fliegen

from()/fromTo() zeigen ihre Startwerte ab dem Start des Clips (verborgen, bis sie eintreten). Überlappende Tweens bei einer Eigenschaft: Der späteste Start gewinnt. Positionen, alle Props und Optionen, Labels, Keyframes, gm.fly und SVG-Hinweise: references/timeline.md.

Ebenfalls eingebaut (Tabellen in references/api.md): data-enter/data-exit Voreinstellungen, data-split, data-stagger, data-count (-roll), data-type (Schreibmaschine), data-scramble, data-camera (Heranfahren, Schweben, Schütteln…), data-parallax, data-morph, data-fit, data-pulse, Easing-Namen (GSAP-Namen funktionieren), voreingestellte CSS-Keyframes und var(--px), und fertige Blöcke (npx givemotion blocks: Untertitel, Code-Fenster, Cursor, Browser-Fenster, Diagramme…).

Technik-Rezepte (lies die, die dein Video benötigt)

Dein Video hat…	Lies…
Ein Logo, Brand-Sting, Intro oder Endcard	references/techniques/logo-reveal.md
Große Schrift, die knallt, stapelt, rotiert; eine Schlagzeile als Star	references/techniques/kinetic-type.md
Text-Enthüllungen: Wörter/Zeichen, Schreibmaschine, Write-On, Scramble, Hervorhebung	references/techniques/text-reveals.md
Kamerabewegungen: Heranfahren, Folgen, Peitschen, Kurven, Zoomen auf ein Detail, Schütteln	references/techniques/camera-moves.md
Mehrere Szenenübergänge (Schieben, Peitschen, Morphen, Form-Wipes)	references/techniques/scene-transitions.md
Glühen, Lichtstreifen, Farbverläufe, Körnung, Unschärfe, Tiefe	references/techniques/light-and-depth.md
Zahlen, Zähler, Balken-/Liniendiagramme, Callouts	references/techniques/numbers-and-charts.md
Linien, die sich zeichnen, Routen, Karten, Pins, etwas, das einen Pfad entlang reist	references/techniques/paths-and-maps.md
Flache Formen: Wachsen, Stauchen, Teilen, Kreisen, Morphen	references/techniques/shapes-and-motion-graphics.md
Eine App/UI mit Cursor, Klicks, Tippen, Listen	references/techniques/ui-demo.md
Code in einem Editor, Tippen, Zeilen-Highlights	references/techniques/code-on-screen.md
Wirkung und Energie: Einschläge, Schütteln, Ausbrüche, Musik-Beats	references/techniques/impacts-and-energy.md
Wort-für-Wort-Untertitel, vertikale 9:16-Clips	references/techniques/captions-vertical.md
Whiteboard, Skizze, handgezeichnet	references/techniques/hand-drawn.md
Ein lebendiger Hintergrund hinter allem	references/techniques/backgrounds-and-ambient.md

API-Referenz (bei Bedarf nachschlagen)

Wann…	Lies…
Ein Attribut, eine Voreinstellung, ein Easing-Name, voreingestelltes CSS oder Block	references/api.md
gm.timeline vollständig: Positionen, Keyframes, Labels, gm.fly, SVG	references/timeline.md
gm.camera Welten, Shots, gm.path.travel, Reiten, Parallaxe	references/camera.md
gm.chart.*, Diagramm-Blöcke	references/charts.md
Diagramme, Pfeile, data-sketch, gm.connect, gm.shape, Pfad-Morphs	references/diagrams.md
Musik, Beats, Voice-Over + givemotion words, Videoclips, Untertitel	references/media-audio.md
Daten/Templates, `<gm-in

…

[gekürzt für die Übersetzung]