Motion-Design
UI-Morph-Animation Design
Ein 14-sekündiger Film rein aus Code: Eine Form wandelt sich über Player, Tabs und Command Palette, jede Veränderung ausgelöst von einem Cursor bei 120 BPM.
Geeignet für
- Produkt-Motion-TeaserKurze Loops, die mehrere Oberflächenzustände zeigen, ohne zwischen Screens zu schneiden.
- Micro-Interaction-ShowreelsSequenzen, die Toggles, Slider, Tabs und Paletten als zusammenhängende Geschichte zeigen.
- Musiksynchrone Interface-AnimationArbeiten, bei denen Cursor-Aktionen auf einem festen Beat-Raster landen.
Motion-Highlights
- Eine Form ohne SchnittJeder Zustand ist eine Verformung desselben Containers, kein Szenenwechsel.
- Vom Cursor ausgelöste VeränderungenJeder Übergang beginnt mit einer sichtbaren Zeigeraktion.
- Ein Loop, der sich schließtDas letzte Frame entspricht dem ersten, sodass die Wiedergabe sauber wiederholt wird.
Vorschau des UI-Morph-Animation Designs
Wie eine Form den ganzen Film trägt
Der Film läuft 14 Sekunden bei 120 BPM, was die Quellnotizen in 7 Takte teilen. Eine einzelne Form beginnt als Generate-Button, wird dann zu Loader, Haken, Dynamic Island, Musik-Player, Lautstärke-Slider, Toggle, Tab-Indikator, Diagramm, Command Palette und Toast, bevor sie zum Button zurückkehrt.
Der Kompromiss: Jeder Zustand muss vom vorherigen durch Skalieren und neues Abrunden desselben Körpers erreichbar sein. Inhalte, die zu dieser Formveränderung nicht passen, müssen entfallen oder neu gestaltet werden.
| Stufe | Sichtbare Veränderung | Gestalterische Bedeutung |
|---|---|---|
| Button zu Loader zu Haken | Der Generate-Button wird zu einem Fortschrittszustand, dann zu einer Bestätigung. | Anfrage, Wartezeit und Ergebnis wirken wie ein Objekt statt wie drei Screens. |
| Dynamic Island zu Musik-Player | Eine kompakte Pill wächst zu einer dunklen Karte mit Albumkachel, Titel, Scrub-Leiste und Steuerelementen. | Das Wachstum von der Pill zur Karte zeigt, wie ein Container sowohl einen Überblicks- als auch einen Detailzustand tragen kann. |
| Slider, Toggle, Tabs | Ein Lautstärke-Slider dehnt sich über sein Maximum hinaus, dann folgen ein Toggle und eine Tab-Pill mit Day / Week / Month. | Kleine Steuerelemente nutzen dieselbe abgerundete Formensprache, sodass man die Veränderung eher in der Bewegung als im Styling spürt. |
| Diagramm, Palette, Toast | Ein Diagramm zeichnet sich selbst, eine Palette tippt „frame“, und ein Toast schließt den Loop. | Die dichtesten Zustände kommen spät, nachdem das Publikum die Logik der Form gelernt hat. |
Die Frames von Player, Tabs und Palette lesen
Drei festgehaltene Frames zeigen, wie unterschiedlich dieselbe Form aussehen kann. Im Player trägt eine schwarze, abgerundete Karte eine Verlaufskachel, „motion study 02“, eine Scrub-Leiste bei 0:49 mit −2:09 Restzeit sowie Symbole für Zurück, Wiedergabe und Weiter. Im Tab-Frame hält eine weiße Pill Day, Week und Month, mit einem schwarzen Indikator hinter Day.
In der Palette führt das getippte Wort „frame“ zu zwei Ergebnissen, „Frame rate · 60fps“ und „Every frame is code“, wobei das erste hervorgehoben ist.
Lesbare Wiedergabezustände
Verstrichene und verbleibende Zeit stehen unter der Fortschrittsleiste. Sie sind illustrative Interface-Inhalte innerhalb eines 14-sekündigen Films, nicht die Laufzeit des Showcase-Videos. Halten Sie beide Angaben gut lesbar, wenn Sie den Player auf eine kleinere Leinwand übertragen.
Der Tab-Indikator ist ein bewegtes Objekt
Die schwarze Day-Pill sitzt in einer weißen Leiste, während der Cursor über Month schwebt. Da der Indikator eine eigene Form ist, kann er zwischen den Labels gleiten und sich dehnen, statt Hervorhebungen auszutauschen.
Palettentext passt zum Film
Die Ergebnisse „Frame rate · 60fps“ und „Every frame is code“ sprechen über das Werk selbst. Übernehmen Sie diese Idee, ersetzen Sie die Texte aber durch Ihr eigenes Produktvokabular.
Zeitgesteuerte Konstruktion und ihre Kompromisse
Die Quellnotizen beschreiben eine einzelne Funktion render(t), die das gesamte Frame aus der Zeit der Master-Timeline zeichnet. Jeder sichtbare Wert ist eine reine Funktion von t mit Eases, Springs oder Keyframes, und zwischen Frames wird kein Zustand übertragen. Rückwärtiges Springen reproduziert daher identische Frames.
Das macht den Export vorhersagbar, verlangt aber mehr vom Autor. Interaktionen, die mit Event-Handlern trivial wären, etwa Hover oder Tippen, müssen als zeitgesteuerte Keyframes geschrieben werden.
Eine Uhr behalten
Die GSAP-Master-Timeline ist die einzige Uhr. Ebenen lesen deren aktuelle Zeit, statt eigene Timer zu betreiben.
Springs pro Veränderung summieren
Die Adaptionsnotizen verlangen pro Veränderung summierte Springs, sodass sich überlappende Bewegungen mischen, statt neu zu starten.
Alles vom Cursor auslösen lassen
Jeder Zustandswechsel braucht zuvor eine Zeigeraktion. Ohne diese Regel wirken die Morphs wie Dekoration statt wie Interaktion.
Quelle und Umfang
Dies ist ein offizieller OpenDesign-Code-Remake und eine Adaption eines Motion-Stücks, das ursprünglich von @twoclipping auf X veröffentlicht wurde. Es wurde anhand des veröffentlichten Stücks im Code neu aufgebaut, und der 14-sekündige Soundtrack ist eine Originalkomposition, kein Audio aus der Quelle. Die Nennung ist ein sachlicher Verweis und impliziert keine Billigung durch den ursprünglichen Urheber.
Dies ist eine gerenderte Motion-Studie, kein nutzbares Interface-Produkt. Player, Diagramm und Palette im Film reagieren nicht auf Eingaben. Das Template stammt aus einem vorgeschlagenen OpenDesign-Video-Workflow; die Verfügbarkeit hängt von der installierten Version ab.
Den Morph an Ihr eigenes Produkt anpassen
Die Notizen empfehlen, die Zustände in der SHAPE-Definition samt Inhalten zu ersetzen und dabei die drei Regeln beizubehalten: eine Form ohne Schnitt, pro Veränderung summierte Springs und ein Cursor hinter jeder Veränderung. Beginnen Sie mit den fünf Produktzuständen, die Sie am dringendsten zeigen müssen, und ordnen Sie sie vom kleinsten zum größten Container.
Halten Sie ersten und letzten Zustand identisch, wenn Sie einen Loop wollen. Unterscheiden sich Ihre Zustände stark in der Größe, wirken die Zwischenframes gedehnt; verlangsamen Sie dann das Tempo entsprechend.
Weniger, stärkere Zustände wählen
Der Film zeigt rund zehn Zustände in 14 Sekunden. Ein Produkt-Teaser mit vier Zuständen gibt jedem mehr Zeit auf dem Bildschirm.
An einer Stelle umgestalten
Text, Palette und Timing stehen als Konstanten am Anfang der Referenz, sodass der Wechsel der warmgrauen Leinwand oder der schwarzen Komponenten eine kleine Änderung ist.
Aufwendige Canvas-Effekte vermeiden
Die Notizen warnen, dass große Verläufe und Rauschen pro Pixel jedes erfasste Frame teuer machen und den MP4-Export verlangsamen.
So erstellen Sie ein UI-Morph-Animation Design in OpenDesign
Form und Zustände festlegen
Listen Sie die Zustände auf, die Ihr einzelner Container durchlaufen muss, vom kompakten Button bis zur größten Form. Legen Sie fest, welche Zeigeraktion jede Veränderung auslöst, und bestimmen Sie das Tempo, bevor Sie etwas zeichnen.
Vorgeschlagener PromptErstelle einen 14-sekündigen UI-Motion-Film als Loop auf einer warmen, hellgrauen Leinwand im Format 1920x1080. Verwende eine einzige schwarz-weiße, abgerundete Form, die nie geschnitten wird. Lass sie bei 120 BPM von einem Generate-Button in einen Loader, einen Haken, einen Musik-Player mit Scrub-Leiste, eine Tab-Pill mit Day / Week / Month und eine Command Palette übergehen, in der ein kurzes Wort getippt wird. Ein sichtbarer Cursor muss jede Veränderung auslösen. Das letzte Frame soll dem ersten entsprechen, damit der Film nahtlos loopt. Verwende nur Beispieltexte und füge keine echten Daten oder funktionierenden Bedienelemente hinzu.
Alles von der Zeit steuern lassen
Lassen Sie jeden sichtbaren Wert aus der Timeline-Zeit berechnen, damit rückwärts Scrubben identische Frames liefert. Halten Sie Text, Palette und Timing als Konstanten, die Sie an einer Stelle bearbeiten können.
Ton, Loop und Tempo prüfen
Prüfen Sie, ob das Endframe dem Startframe entspricht, ob Cursor-Aktionen auf Beats landen und ob dichte Zustände nicht gehetzt wirken. Verwenden Sie nur Audio, dessen Nutzung Ihnen erlaubt ist, oder lassen Sie den Film stumm.
Exportieren und Share-Link erhalten
Das fertige Design exportieren und anschließend über „Teilen" in OpenDesign einen Share-Link abrufen. Den Link in einem separaten Browserfenster öffnen und prüfen, ob die gewünschte Version sowie alle Assets vorhanden sind, bevor er weitergegeben wird.
Kunstgeschichte-Logo-Motion-Video-Design
Ein 15-sekündiger 16:9-OpenDesign-Film hält ein kreisförmiges Cursor-Logo durch schnelle, von der Kunstgeschichte inspirierte Looks erkennbar und endet auf einem stehenden weißen Logo auf Schwarz.
Motion-Design
Community-Meilenstein: Motion-Video-Design
Ein 30-sekündiges OpenDesign-Motion-Video führt von einem Reveal der 100K Sterne über ein Contributor-Mosaik und eine Produktmontage zu einer abschließenden Einladung zum Prompt.
Motion-Design
Futuristisches Motion-Video-Design
Ein gerendertes, elektrisch blaues Reel mit Worttunnel, SET-Countdown und Chrom-Finale FUTURE, per Code auf einem 120-BPM-Schnittraster nachgebaut. Timing und Anpassung im Überblick.
Motion-Design
Motion-Designer-Showreel Design
Ein 15-sekündiges Showreel mit 128 BPM, in Code nachgebaut: harte Farbschnitte, ein Live-HUD und sieben Kapitel, getaktet auf den Takt. So funktionieren Timing, Typografie und Palette.
Motion-Design