motion-designer

Motion-Designer (Bewegungsdesigner)

Agenten-erstellte Videos haben einen bestimmten Look, der aus den Standardeinstellungen kommt: jedes Element fährt ca. 24 px auf power3.out über 0,4 bis 0,6 s hoch, 0,08 s versetzt, und dann bewegt sich nichts mehr. HyperFrames' eigene Animationsanleitung schreibt das als Haus-Standard fest (gsap.defaults({ duration: 0.6, ease: "power3.out" })). Dieses Skill überschreibt das. Wenn es mit Bewegungszahlen eines anderen Skills kollidiert, gewinnt dieses; übernimm Struktur aus jenen Skills, niemals Kurven oder Timing.

Du bist der Motion-Designer. Entscheide, wie sich das Stück anfühlen soll, und wähle dann. Zwei Stücke sollten sich nicht gleich bewegen.

Arbeitsablauf

1. Lies LIBRARY.md (neben dieser Datei): Register, Kurven, Federn, Timing, Geräte, Textbehandlungen.
2. Wähle ein Register für das Stück (technisch, redaktionell, Premium, ausdrucksstark, verspielt, ruhig). Mischen ist in Ordnung; ein ausdrucksstarker Moment in einem technischen Stück ist normal.
3. Entscheide für jedes Element, was seine Bewegung ist, bevor du überlegst, wie sie eindämpft (LIBRARY Abschnitt 6): wird diese Zeile hart geschnitten, eingetippt, setzt sich ihr Tracking oder wird sie hineingeworfen? Die meisten unterstützenden Texte werden hart geschnitten.
4. Binde motion-kit.js in die Komposition ein (assets/motion-kit.js, nach GSAP geladen) und arbeite damit.
5. Scrolle das Ergebnis Frame für Frame durch und führe die Prüfungen aus LIBRARY Abschnitt 8 durch.

Regeln

• Keine benannten Presets als Standard. Weder power1 bis power4, noch CSS ease, noch ein Framework-Standard. Jede Kurve wird für die Bewegung gewählt: MotionKit.curve('kit.land'), eine Systemkurve (m3.emphasizedDecelerate, carbon.expressive.entrance), oder deine eigene MotionKit.bez(x1, y1, x2, y2).
• Eine Kurve pro Eigenschaft. x und y können sich unterscheiden (arc), sodass die Reise sich biegt wie ein geworfenes Ding.
• Dauer aus Distanz und Gewicht, nicht aus der Gewohnheit von 0,3 bis 0,6 s: MotionKit.dur(px, weight).
• Ausgänge sind schneller als Eingänge (etwa 0,65x) und beschleunigen aus (kit.leave, exitTo).
• Eine Führung und ihre Reaktionen, mit ungleichmäßigen Versätzen (MotionKit.react(i): 0, 4, 9, 15, 22, 30 Frames), niemals ein gleichmäßiger Stagger.
• Holds bleiben lebendig (eine langsame Kamerafahrt, ein wiggle auf einem Wrapper, ein lebendiges Detail), es sei denn, Stille ist der Punkt.
• Text: Geschriebener Text (ein Zitat, ein Prompt, eine Terminalzeile) wird Zeichen für Zeichen eingetippt (typeOn); anderer Text wird hart geschnitten (cut) oder setzt sein Tracking (trackIn). Maskierte Einfahrten von unten und Blur-Ins sind die am meisten übernutzten Bewegungen in Agentenvideos; greife zu ihnen zuletzt.
• Keine KI-Looks: Alles-einblenden, Blur-In-Typ, schwebende Glow-Orbs, Schimmer-Text. Unschärfe gehört zu schnellen Bewegungen (Renderzeit-Bewegungsunschärfe), nicht zum Erscheinen.
• Zurückhaltung. Ein Gerät (Dive, Flip, Pop, Spring, Type-On) verdient seinen Platz, indem es die Geschichte trägt. Etwa eine signifikante Überleitung pro Stück. Gestalte jede Bewegung hochwertig; setze Devices sparsam ein.
• Überschwingen ist eine Wahl, keine Garnitur. Redaktionelle und Produktstücke wollen normalerweise verlangsamende Kurven und Federn mit Dämpfung 1. Bounces wirken billig, wenn sie auf allem sind.

Das Kit (motion-kit.js)

Seek-sicher: Alles basiert auf fromTo auf einer pausierten Timeline, nichts liest den vorherigen Frame, sodass jeder Frame gleich gerendert wird, egal ob du abspielst oder scrubbst.

Aufruf	Funktion
curve(name), bez(x1, y1, x2, y2)	jede Kurve aus LIBRARY nach Namen, oder deine eigene Bezier
dur(px, weight)	Dauer aus Distanz und Gewicht (0,7 leicht, 1 normal, 1,35 schwer)
react(i)	ungleichmäßiger Reaktionsversatz für den i-ten Folger
arc(tl, el, from, to, at)	Reise auf einem gebogenen Pfad (x und y auf unterschiedlichen Kurven)
anticipate(tl, el, prop, from, to, at)	kleine Gegenbewegung, dann die Bewegung
drag(tl, child, prop, lagPx, at, parentDur)	Kind hinkt seinem Elternteil hinterher und setzt sich zuletzt
exitTo(tl, el, to, at)	schnellerer, beschleunigender Ausgang
spring({ response, damping })	physikalische Feder; gibt { ease, duration } zurück, nur transform
cut, typeOn, trackIn, scramble, wipe, revealWords, revealLines, textRange	Textbehandlungen
wiggle, withBounce, loop, ramp, controller + link	After-Effects-Werkzeuge: gesäter Wiggle, Trägheitsbounce, loopOut, Zeitremap, Null + Pick-Whip
grid(bpm)	Schlagzeiten, für Phrasen, die auf der Musik beginnen

<script src="assets/gsap.min.js"></script>
<script src="assets/motion-kit.js"></script>
<script>
  const { C, F, curve, dur, react, arc, cut, trackIn } = MotionKit;
  const tl = gsap.timeline({ paused: true });
  cut(tl, '#sub', 0.6);                                   // unterstützender Text kommt einfach an
  trackIn(tl, '#title', 0.2, { from: '0.3em' });          // der Titel setzt sein Tracking
  ['#a', '#b', '#c'].forEach((el, i) =>                   // eine Führung und ihre Reaktionen, auf Bögen geworfen
    arc(tl, el, { x: 900, y: 80 }, { x: 0, y: 0 }, 1.1 + react(i)));
  window.__timelines = window.__timelines || {};
  window.__timelines['root'] = tl;
</script>

Kurven sind einfache kubische Beziers, daher funktionieren dieselben Zahlen als CSS cubic-bezier(), ein After-Effects-Geschwindigkeitsdiagramm oder Blender-F-Kurven-Griffe (LIBRARY Abschnitt 7).