Einrichtung: Orange Dot Bewegungssystem

Bitten Sie mich um Folgendes: eine kurze Bezeichnung für den Ein-/Ausschalter, ein Schlüsselwort, eine Prozentangabe für das Diagramm, den Text für die letzte Karte, eine Akzentfarbe und einen Track mit einem klaren Beat.

Ein 2D-Motion-Design-Film im 16:9-Format. Verwenden Sie eine warme, gebrochen weiße Leinwand, fast schwarze Hintergründe, eine markante Typografie und einen leuchtend orangen Akzent. Der orange Punkt verbindet alle Szenen: Er beginnt in der Benutzeroberfläche, wird zum Punkt über einem Buchstaben, beschreibt eine Federkurve, wächst zu einer Form heran und kehrt auf der Abspannkarte zurück. Ein Cursor lässt den Klick beim Öffnen realistisch wirken. Die Bewegung sollte präzise und kontrolliert sein, mit minimalen Federbewegungen und ohne Leerlauf.
Verboten sind: Archivmaterial, Farbverläufe, Glüheffekte, Partikelexplosionen, zufällige Übergänge und Bewegungen, die nicht mit einem bereits auf dem Bildschirm befindlichen Element verbunden sind.

Etwa 15 Sekunden, mit einem visuellen Wechsel bei jedem wichtigen Taktschlag.
Öffnen: Ein Cursor klickt auf den orangefarbenen Schalter neben „Bewegung reduzieren“. Die Buchstaben biegen sich und bewegen sich an ihren Platz, bis nur noch „Bewegung“ übrig bleibt, mit dem orangefarbenen Punkt über dem „i“.
Spring: Der Punkt springt vom Wort weg und landet auf einem Diagramm. Seine Bahn beschreibt eine federnde Reaktion, schießt über das Ziel hinaus und kommt neben einer „+22%“-Angabe zum Stillstand.
Form: Ein Punkt schießt über eine Linie, wächst zu einem orangefarbenen Kreis an und füllt das Bild aus. Ein schwarzes, abgerundetes Quadrat rotiert darin und dehnt sich dann zu einer Pille aus. Die Szene verengt sich zu einem einzelnen orangefarbenen Punkt auf schwarzem Hintergrund.
Typ: Wörter wie „FRINGS“, „EASING“, „KINETISCHER TYPE“, „3D“ und „SOUND“ umkreisen den Punkt. Der Schriftkreis öffnet sich zu einem Feld winziger Punkte.
Enthüllung: Das Halbtonfeld dehnt sich aus und kippt zu Schwarz, wodurch die letzte Karte sichtbar wird: „ Opus 5.5 “, „Motion Designer“ und „0 Keyframes“.
Rückkehr: Der orange Punkt bewegt sich zurück durch das Halbtonraster, die Grafik und den Schalter. Passe das letzte Bild an das erste an, damit das Video sauber in einer Schleife abgespielt wird.

1. Eine HTML Datei, 1920x1080 bei 60 fps. Alle visuellen Daten werden innerhalb von seek(t) berechnet: keine CSS Übergänge, Timer oder Zustandsübertragung zwischen den Frames.
2. Verwenden Sie geschlossene Federfunktionen für den Schalter, den springenden Punkt und den Graphen. Zeichnen Sie den Graphen anhand derselben Federfunktion, die den Punkt bewegt.
3. Animieren Sie die Buchstaben einzeln für die Transformation „Bewegung reduzieren“ zu „Bewegung“. Lassen Sie den orangefarbenen Punkt am „i“ befestigt, bis es seinen Sprung beginnt.
4. Verwandle den orangefarbenen Kreis, das rotierende Quadrat und die Pille in verschiedene Zustände derselben Form. Behalte dabei ihre Position und Bewegung bei.
5. Ordnen Sie die kreisenden Wörter auf einem Kreis an und bewegen Sie dann ihre Buchstaben nach außen, um den Rahmen an das Halbtonraster zu übergeben.
6. Zeichne das Halbtonraster als Punktgitter, dessen Größe dem orangefarbenen Punkt entspricht. Lass es über die Rahmenränder hinauswachsen, bevor die Endkarte sichtbar wird.
7. Synchronisieren Sie Klick, Punktlandung, Diagrammmaximum, Formänderungen und den finalen Titel mit den gemessenen Takten. Rendern Sie ein Bild pro Takt, um das Tempo vor dem vollständigen Export zu überprüfen.

Graph und Punkt müssen die gleiche Bewegung ausführen, sonst wirkt die Federung unnatürlich. Der orangefarbene Akzent sollte in allen Szenen einheitlich sein. Ein- und ausgehender Text müssen zeitlich getrennt dargestellt werden, damit sich die Buchstaben nicht überlappen. Wenn eine Form den Bildschirm ausfüllt, sollte sie über alle vier Ecken hinaus skaliert werden. Cursor, Punkt und Typografie müssen im ersten und letzten Frame aufeinander abgestimmt sein, um ein Ruckeln in der Endlosschleife zu vermeiden.

Bitten Sie mich um die Eingaben und zeigen Sie mir dann die Beatmap und vier Standbilder (Toggle, Graph, kinetischer Typ, Endkarte), bevor Sie das vollständige Video erstellen.

Ask me for: a short label for the opening toggle, one hero word, a percentage for the graph, the text for the final card, one accent color, and a track with a clear beat.

A 2D motion design film in 16:9. Use a warm off-white canvas, near-black backgrounds, bold typography and one vivid orange accent. The orange dot connects every scene: it starts in the UI, becomes the dot over a letter, traces a spring graph, grows into a shape and returns on the end card. A cursor makes the opening click feel real. Keep the motion sharp and controlled, with small spring overshoots and no dead time.
Banned: stock footage, gradients, glows, particle bursts, random transitions and motion that isn't connected to an element already on screen.

Around 15 seconds, with a visual change on every major beat.
Open: a cursor clicks the orange toggle beside "Reduce Motion". The letters bend and move into place until only "Motion" remains, with the orange dot above the "i".
Spring: the dot jumps away from the word and lands on a graph. Its path draws a spring response, overshoots the target and settles beside a "+22%" callout.
Shape: the dot shoots across a line, grows into an orange circle and fills the frame. A black rounded square rotates inside it, then stretches into a pill. The scene contracts to a single orange dot on black.
Type: words like "SPRINGS", "EASING", "KINETIC TYPE", "3D" and "SOUND" orbit the dot. The circle of type opens out into a field of tiny dots.
Reveal: the halftone field expands and flips to black, revealing the final card: "Opus 5.5", "Motion designer." and "0 keyframes".
Return: the orange dot moves back through the halftone, graph and toggle. Match the final frame to the first so the video loops cleanly.

1. One HTML file, 1920x1080 at 60fps. Compute every visual from time inside seek(t): no CSS transitions, timers or state carried between frames.
2. Use closed-form springs for the toggle, bouncing dot and graph. Draw the graph from the same spring function that moves the dot.
3. Animate letters individually for the "Reduce Motion" to "Motion" transformation. Keep the orange dot attached to the "i" until it begins its jump.
4. Make the orange circle, rotating square and pill different states of the same shape. Preserve its position and motion through each transformation.
5. Place the orbiting words along a circular path, then move their letters outward to hand the frame over to the halftone grid.
6. Draw the halftone as a grid of dots whose sizes respond to the orange dot. Let it grow past the frame edges before revealing the end card.
7. Sync the click, dot landing, graph peak, shape changes and final title to measured beats. Render one frame per beat to check the pacing before the full export.

The graph and dot must follow the same motion or the spring will feel fake. Keep the orange accent consistent across every scene. Give outgoing and incoming text separate timing so letters don't overlap. When a shape fills the screen, scale it past all four corners. Match the cursor, dot and typography in the first and last frames to avoid a loop stutter.

Ask me for the inputs, then show me the beat map and four stills (toggle, graph, kinetic type, end card) before building the full video.

Vorlage entnommen aus Post @ultimaxbt.