Morphende UI-Loop, gesteuert von einem klickenden Cursor
<direction> Erstelle ein quadratisches 14-Sekunden-Video (1440x1440, 30 fps): ein nahtloser UI-Motion-Loop, komplett gezeichnet, ohne Schnitte. Eine abgerundete Form verwandelt sich immer weiter von einer Interface-Komponente in die nächste: Button, Loader, Häkchen, Island-Pille, Musikplayer, Lautstärkeregler, Toggle, Tabs, Diagramm, Suchpille, Command Palette, Toast und zurück zum Button. Ein Cursor auf dem Bildschirm steuert jede Änderung und klickt und zieht wirklich. Das letzte Bild muss zum ersten passen, damit es loopt. Der Look ist klar und ruhig: eine lavendelfarbene Fläche, tiefdunkle Tinten- und weiße Komponenten und eine saubere UI-Schrift. Die einzige Farbe kommt von meinem Logo, das als Albumcover dient. Fast auf jedem Beat passiert etwas, bei etwa 120 BPM. Vermeide Glows, Verläufe auf der UI-Oberfläche, Partikel, federnde Easings, Schnitte und Stimme. Alle Bildschirmtexte unten sind Beispiele, die durch meine ersetzt werden. Halte jeden etwa gleich lang, damit das Layout hält. </direction> <structure> 0.0-0.6 s: ein tintenfarbener Pillen-Button „Open app“ (etwa 640x200 px, weiße Schrift mit 62 px). Der Cursor gleitet von unten rechts herein und drückt ihn bei 0.46 s, der Button sinkt auf 96 %. 0.6-1.25 s: er schrumpft zu einem Kreis von 230 px mit einem weißen kreisenden Bogen, dann zeichnet sich ein weißes Häkchen. 1.25-1.75 s: der Kreis streckt sich zu einer Island-Pille (etwa 860x210) mit meinem Logo als kleinem abgerundetem Quadrat links und fünf hüpfenden weißen Waveform-Balken rechts. 1.75-3.7 s: die Island öffnet sich zu einer tintenfarbenen Player-Karte (etwa 990x630, 72 px Ecken). Das Logo wächst als geteiltes Element zu einem 224-px-Cover neben dem Titel „Ideas in motion“ und „[your site]“ in zartem Lavendel. Darunter eine dünne weiße Fortschrittsleiste mit Knopf, „01“ und „03“ an den Enden und Symbole für zurück / Pause / weiter. Der Cursor klickt Pause, das über einen schnellen Blur zu Play wird, und klickt dann zurück auf Pause. Danach greift er den Knopf, der um 25 % wächst, und zieht ihn von etwa einem Drittel bis fast ans Ende. 3.7-5.25 s: die Karte klappt zu einer breiten Lautstärke-Pille zusammen (etwa 1070x186) mit einem Lautsprechersymbol. Der Cursor zieht den Pegel fast auf null, wieder hoch und über das Maximum hinaus. Die ganze Pille dehnt sich wie Gummi nach rechts, bis etwa 170 px, und federt beim Loslassen mit einem kleinen Wackeln zurück. 5.25-6.25 s: sie wird zu einem Toggle (etwa 520x260). Der Knopf erscheint grau in der Mitte, dann kippt er an, aus, an, aus, jeweils mit einem Druck. An ist eine tintenfarbene Spur mit dem weißen Knopf rechts. Aus ist eine blasse #E9E4F2-Spur mit dem Knopf links. 6.25-7.25 s: der Knopf wächst zum tintenfarbenen Indikator einer weißen Tab-Leiste „Pick“ / „Describe“ / „Export“. Der Cursor klickt „Describe“, dann „Export“. Der Indikator streckt sich voraus und holt auf, und das Label darunter wird weiß. 7.25-9.7 s: die Tab-Leiste öffnet sich zu einer weißen Diagrammkarte (etwa 1100x840), die Tabs wandern nach oben und der Indikator wird eine kleine Pille. Eine große fette Zahl rollt „01“, „02“, „03“ mit leichtem Blur über der Bildunterschrift „Refine in words, then export“. Währenddessen zeichnet sich eine tintenfarbene Linie in etwa einer halben Sekunde von links nach rechts über einer lavendelfarbenen Fläche und vier Haarlinien. Der Cursor streicht an der Linie entlang mit einem tintenfarbenen Tooltip „01“, „02“, „03“, gefolgt von einem Punkt und einer gestrichelten Hilfslinie. Ein Klick auf „Describe“ rollt die Zahl auf „02“ mit der Bildunterschrift „Describe your idea“, und die Kurve morpht in eine niedrigere, welligere. 9.7-10.1 s: die Karte klappt zu einer weißen Suchpille zusammen mit Suchsymbol, „Edit in words“ und „⌘K“ rechts. 10.1-11.75 s: die Pille öffnet sich zu einer Command Palette (etwa 1060x830). Oben eine Suchzeile mit dem Platzhalter „Describe your idea“ und blinkendem Cursor, dann eine Haarlinie. Fünf Zeilen folgen, im Abstand von 40 ms eintretend, jede mit einer lavendelfarbenen Icon-Kachel: „Pick a template ⌘N“, „MP4 export ⌘E“, „Ideas in motion“, „Live preview“, „Your AI motion designer ↵“. Das Wort „motion“ wird Buchstabe für Buchstabe getippt, etwa 0.1 s auseinander und leicht ungleichmäßig, mit festem Cursor beim Tippen. Das getippte Wort muss genau zwei Zeilen treffen. Nicht mehr passende Zeilen verschwinden im Blur, die zwei Treffer rutschen nach oben, das Panel federt kürzer und die Ansicht zoomt hinein. Eine lavendelfarbene Markierung liegt auf dem ersten Treffer, wandert zu „Your AI motion designer“ hinunter und wird bei Enter tintenfarben. 11.75-12.6 s: die Palette faltet sich über einen helleren Ton zu einem tintenfarbenen Toast (etwa 970x180) mit weißem Häkchen und „Your AI motion designer“, während die Ansicht zurückgleitet. 12.6-14 s: der Text des Toasts verschwimmt zu „Open app“ und die Pille schrumpft zurück zum Anfangs-Button. Er bleibt bis zum Ende, der Cursor ruht unten rechts, sodass das letzte Bild zum ersten passt. </structure> <composition> Die Fläche ist lavendelfarben #F0EDFF mit einem weichen weißen Glühen knapp über der Mitte und einer leichten Vignette. Komponenten sind tintenfarben #1C0B5D oder weiße Panels #FFFFFF. Gedämpfter Text ist #6B6385, Haarlinien und der Aus-Zustand des Toggles sind #E9E4F2. Alle Panels werfen weiche, lange Schatten in Tintenfarbe. Die einzigen Farbakzente sind die Farben meines Logos, hier Pink #FB2D89 und Orange #FE9117, also nimm die Farben deines Logos. Das Logo erscheint als kleines abgerundetes Quadrat der Island und als Cover des Players. Setze alle Texte in Geist, die kleinen Zahlen des Players in Geist Mono. Der Cursor ist ein fast schwarzer Pfeil (#0D0B1E) mit weißem Rand. Alles bleibt mittig auf der Fläche. </composition> <techniques> Die eine Form ändert Breite, Höhe, Eckenradius und Farbe auf straffen Federn: etwa 0.25 s zum Einschwingen, höchstens etwa 1 % Überschwingen. Alles in jedem Zustand blendet in 0.1 s mit 10 px Blur ein und aus, sodass sich Text nie überlagert, während der Container seine Größe ändert. Textwechsel, wie Pause zu Play und der Toast-Text zurück zu „Open app“, laufen ebenfalls über einen schnellen Blur. Der Cursor bewegt sich auf glatten Kurven und schrumpft um etwa 14 %, solange sein Button gehalten wird. Das Logo wandert als geteiltes Element von der Island zum Player-Cover. Die Lautstärke-Pille dehnt sich wie Gummi, wenn über das Maximum gezogen wird, und federt dann mit einem kleinen Wackeln zurück. Die Vorderkante des Toggle-Knopfs läuft auf einer steiferen Feder als die Hinterkante, sodass sich der Knopf auf dem Weg streckt. Der Tab-Indikator streckt sich genauso voraus und holt auf. Die Zahlen des Diagramms rollen mit leichtem Blur, die Linie zeichnet sich in etwa 0.5 s von links nach rechts, und die Kurve morpht beim Tab-Wechsel in ihre neue Form. Palettenzeilen treten im Abstand von 40 ms ein, und herausgefilterte Zeilen verschwimmen. Die Kamera bleibt stehen, außer einem sanften 17-%-Push-in, solange die Palette kurz ist, das beim Entstehen des Toasts wieder zurückgleitet. </techniques> <music> Erzeuge einen schwungvollen instrumentalen Rockabilly-/Country-Rock-Track in Es-Dur bei etwa 120 BPM, genau so lang wie das Video. Er hat einen Boom-Chick-Groove mit der Bassdrum auf dem Beat und der Snare auf den Achteln dazwischen, und twangige Lead-Gitarrenlicks über Bass und Schlagzeug. Er startet mit voller Energie im ersten Bild und bleibt gleichmäßig. Lege die Cursor-Aktionen und Morphs auf sein Beat-Raster. Bei etwa 13.4 s hört die Band mit einem Schlag und einem Crash auf und lässt ihn ausklingen, damit der Loop im Takt wieder anschließt. </music> <sound> Soundeffekte, passend zum Bild komponiert, über der Musik: - Jeder Cursor-Druck klickt mit einem kurzen, hellen Tick und einem kleinen getonten Klang. Jedes Loslassen gibt einen weicheren, höheren Tick. Beide werden sanft mit dem Cursor gepannt. - Ein winziges Blip, wenn das Häkchen erscheint. - Ein umgekehrtes Becken, das in den Klick auf den Tab „Export“ anschwillt. - Ein weicher tiefer Boom, wenn die Diagrammkarte sich öffnet. - Die Suche wird auf einer Schreibmaschine getippt: zwei Tasten für ⌘K, ein Klack pro getipptem Buchstaben, eine leichtere Taste für den Pfeil nach unten und ein schweres Enter mit einem kleinen Schreibmaschinenglöckchen. - Ein Wagenrücklauf-Zip, wenn die Palette sich zum Toast faltet, das mit einem Klonk endet, wenn der Toast landet. - Ein tiefer Boom und ein Splash unter dem finalen Stopp. Die Höhen der Musik sinken kurz unter jedem Klick und Tastenanschlag, damit sie hörbar sind. Keine Stimme. Mix auf etwa -14 LUFS, True Peak unter -1 dBTP. </sound> <references> Fließende Interface-Morph-Loops aus einer einzigen Form wie in Produkt-UI-Showreels und Übergängen im Dynamic-Island-Stil, in denen ein Container sich in einer einzigen durchgehenden Einstellung immer wieder in die nächste Komponente verwandelt. </references>
