theatlasteam/motion-design-skill

Produkt-Motion-Design

Erstelle eine zusammenhängende Geschichte, keine Diashow unzusammenhängender, ansprechender Karten. Bewahre das Aufmerksamkeitsobjekt des Betrachters durch Absicht → Aktion → Ergebnis → Produktwert → Marke.

Wähle einen Startpunkt

Lies das README des relevanten Beispiels, dann dessen Quellcode. Löse Pfade relativ zu diesem Skill auf; gehe niemals davon aus, dass Dateien aus einer vorherigen Sitzung existieren.

Aufgabe	Starte hier
iOS-ähnliches Rad, rollende Ziffern, Segmente, Lineal	examples/controls/README.md
Kinetische Typografie, verzerrter UI-Eintritt, Cursor-geführte Präsentation	examples/relay/README.md
Großer Composer, tippgesteuerte Kamera, Senden → generiertes Ergebnis	examples/composer/README.md
Kurzer 9:16 echter 3D-Geräte-Spin	examples/device-studio/README.md
Kompletter 22-Sekunden-Mobilfunk-Launch	examples/milo-launch/README.md
MIDI-Komposition, samplede Instrumente, Mixing	examples/midi-score/README.md

Lies references/direction.md für Inszenierung und Timing, references/deterministic-rendering.md vor dem Video-Export und references/asset-rights.md vor der Veröffentlichung oder Weiterverteilung von Assets. Offizielle Links zu Drittanbieter-Inspirationen befinden sich in references/gemini.md; diese Videos sind Referenzen, keine gebündelten Open-Source-Assets.

Lege die Einstellung fest

1. Verwende bereits bereitgestellte Informationen zu Produkt, Zielgruppe, Seitenverhältnis, Dauer und Ton wieder. Frage nur nach fehlenden Informationen, die die Arbeit verändern. Wähle für ein fiktives Produkt ein kohärentes Konzept, anstatt nach jedem Detail zu fragen.
2. Prüfe echtes Produkt-/Markenmaterial, bevor du Produktbehauptungen aufstellst. Erfinde niemals Fähigkeiten, Metriken, Testimonials oder Produktions-Screenshots.
3. Beginne für eine neue visuelle Richtung mit einer fertigen 2-3-sekündigen HTML-Einstellung, es sei denn, ein vollständiger Film wurde ausdrücklich angefordert. Behalte die genehmigte Choreografie bei, wenn du sie erweiterst.
4. Verwende standardmäßig eigenständiges HTML/CSS/JavaScript für Prototypen. Eine HTML-Anfrage ist keine Berechtigung für ein teures Video-Rendering, einen Upload oder eine Cloud-Veröffentlichung. Wechsle den Stack nur, wenn es erforderlich oder angefordert ist.
5. Gib die Abfolge der Aktionen und Kamerahandoffs kurz vor dem Programmieren an. Halte das fokussierte Objekt jeder Einstellung klar.

Inszeniere Motion, dekoriere nicht

• Miss Wörter erst, nachdem die tatsächlichen Schriftarten geladen sind. Ordne vorherige Wörter neu an, wenn ein neues eintrifft, und behalte den Mittelpunkt des Layouts bei.
• Trenne Positions-, Deckkraft- und Unschärfekurven. Mache Bewegung früh sichtbar und klare Unschärfe vor dem finalen Überschwingen. Animieren den Exit bewusst anstatt mit standardmäßigem Ausblenden.
• Verwende ein kurzes, lesbares Überschwingen und Ausbalancieren; lass nicht jedes Objekt wackeln. examples/relay/scripts/motion-core.mjs enthält getestete Text-/Kamera-Federn, Bézier- und zylindrische Warp-Funktionen.
• Verzerre ein Panel mit mehreren horizontalen Streifen, wenn Krümmung wichtig ist; eine einzelne flache Drehung ist keine gebogene Oberfläche. Treibe diagonale Bewegungen auf beiden Achsen von einem Fortschrittswert an.
• Zoome auf eine tatsächliche Aktion, anstatt ein unlesbar kleines Dashboard zu zeigen. Bewege den Cursor und die UI im selben transformierten Koordinatensystem, einschließlich Hotspot-Kompensation.
• Zeige Hover → Drücken → Loslassen → echte Zustandsänderung. Ein Drag benötigt Aufnehmen, Bewegen, Absetzen und aktualisierten zugehörigen Zustand. Lass das Ergebnis der Aktion folgen, die es verursacht hat.
• Halte die Shader-Zeit auf der Szenen-Uhr. Gib an, wann WebGL zurückfällt; nenne einen statischen Gradienten niemals einen laufenden Shader.

Interaktive Steuerungen versus aufgezeichnete Bewegungen

Verwende die gebündelten Steuerungen, anstatt ihre Physik für jedes Video neu zu erstellen.

• setValue(value) ist interaktiv: Integriere eine Feder von der aktuellen Präsentationsposition und -geschwindigkeit. Erlaube Eingabe, sie zu unterbrechen.
• renderAt(value) ist deterministisch: Setze sofort einen Bruchteil-Komponentenwert. Leite diesen Wert im Video aus frame/fps ab; führe während der Aufnahme keine lebende Feder oder Echtzeitschleife aus.
• Zeige bei einem Rad ein festes zentrales Auswahlfenster und zwei gebogene Optionen auf jeder Seite in der Mitte der Liste. Berechne Position, Neigung, Skalierung und Deckkraft aus dem Bruchteil-Abstand zur Mitte.
• Verfolge Drag 1:1 mit Pointer Capture. Beim Loslassen, projiziere Impuls, raste auf ein gültiges Element ein und trage die Geschwindigkeit in das Ausbalancieren. Wende progressive Grenzresistenz an.
• Unterstütze Rad/Trackpad, Tastatur, Fokus, zugängliche Namen/aktuelle Werte, schmale Viewports und reduzierte Bewegung. Spiele keine Töne oder Haptiken ohne eine durchdachte Anforderung ab.
• Stoppe eine externe Demo-Zeitleiste bei direkter Manipulation; zwei Uhren dürfen nicht um dieselbe Komponente kämpfen.

Composer und Kamera

Zeige beide abgerundeten Enden, während das Feld leer ist. Erweitere ein endliches Feld während der Eingabe. Miss den Text und die Send-Position; folge dem wachsenden Text von Anfang an mit Beschleunigung und Bremsen und stoppe bei Send. Schütze einen separaten Textbereich, sodass Buchstaben niemals unter den Button gelangen. Zeige nach Send ein unabhängig inszeniertes Ergebnis und eine sinnvolle Aktion darin; forme die Eingabe nicht in die Ausgabe um. Verwende das generische Canvas Lab-Beispiel für die Choreografie, nicht als Behauptung über das Verhalten oder die Latenz eines echten Modells.

Echte 3D-Geräte-Einstellungen

Verwende ein echtes GLB und das originale Display-Mesh, keinen PNG-Frame oder einen schwebenden DOM-Bildschirm. Halte Bildschirm und Gehäuse auf einem Rig. Verwende Studio-Softbox-Reflexionen, separate Metall/Glas/Optik-Materialien, eine Kamera mit längerer Brennweite, erleichterte Rotation und einen lesbaren Frontal-Halt. Animiere App-Aktionen in der Bildschirmtextur, sodass Touch-Indikatoren der Perspektive folgen. Erfasse DOM-Typografie und WebGL gemeinsam für das Video.

Das referenzierte iPhone GLB ist nicht enthalten und nicht MIT-lizenziert. Benötige eine separat lizenzierte Kopie des Benutzers oder eine explizit lizenzierte Alternative. Überprüfe Mesh-Namen, Display-Normalen, UVs, Skalierung und Rahmung, bevor du ein anderes Modell verwendest. Bezeichne das Beispiel niemals als offizielles Apple-CAD, offizielles Apple-Rendering oder Path Tracing.

Ton, nur auf Anfrage

Lies references/music.md. Bevorzuge eine originale Mehrspur-MIDI → separat beschafftes lizenziertes SoundFont → gerenderte Stems → Mix, wenn MIDI/Instrumente angefordert werden; mache keine kostenpflichtige neuronale API zwingend erforderlich. Binde spärliche Ton-Akzente an tatsächliche Bildhinweise. Halte Musik, SFX und Sprache unabhängig bearbeitbar. Behaupte nicht, dass eine Partitur gut oder genehmigt ist, ohne zuzuhören/Benutzerfeedback. Messungen und eine Cue-Liste sind kein fertiger, probegehörter Track.

Für Live-HTML: Gate Audio mit Gesten und halte die visuelle Uhr unabhängig von einem Audio resume()-Promise oder einer stockenden Audio-Uhr. Audio-Fehler dürfen die Animation nicht einfrieren. Für Offline-Video: Richte Samples auf der Zeitleiste aus, anstatt einen Live-Browser-Audio-Stream als einzige Masteraufnahme zu verwenden.

Überprüfen und ausliefern

1. Führe die relevanten mathematischen/funktionalen Tests aus. Überprüfe direkten, umgekehrten, beliebigen und wiederholten Seek; Cursor-Treffer; Zustands-Kausalität; Tastatur/Drag-Unterbrechung; 390px-Layout; und JS-Fehler.
2. Respektiere den Umfang des Benutzers für die visuelle Überprüfung. Behaupter nicht, dass Rendering- oder Metadaten-Checks visuelle Inspektion sind. Wenn eine visuelle Qualitätssicherung angefordert wird, überprüfe tatsächlich repräsentative Eintritts-/Zwischen-/Interaktions-/Austrittsframes und behebe Überlappungen, Beschneidungen, unleserliche Texte und falsche Ebenen.
3. Für MP4: Rendere und überprüfe tatsächlich Dauer, Abmessungen, fps, Frame-Anzahl, Dekodierung und Audio-Präsenz. Liefere keine Anweisungen und nenne sie ein exportiertes Video.
4. Liefere das angeforderte HTML oder MP4 zusammen mit reproduzierbarem Quellcode, genauen Setup-Anweisungen, Asset-Rechtshinweisen und ehrlichen Einschränkungen. Füge nicht stillschweigend Musik hinzu.
5. Halte private Anmeldeinformationen, Sitzungs-URLs, OS-Assets, heruntergeladene kommerzielle Modelle und generierte Bundles mit eingebetteten eingeschränkten Assets aus einem öffentlichen Repository heraus. Die Root-MIT-Lizenz deckt originären Code/Dokumentation ab, nicht jede Abhängigkeit oder jedes externe Asset.