Motion Fabdein KI-Motion-Designer
DE
App öffnen beta
Simple Motion

Morphende UI-Loop, gesteuert von einem klickenden Cursor

Eine abgerundete Form verwandelt sich von Button zu Player, Slider, Toggle, Tabs, Diagramm und Command Palette in einem nahtlosen quadratischen 14-Sekunden-Loop, gesteuert von einem Cursor.

Veröffentlicht

Prompt verwenden

Der Prompt öffnet sich in der App: Füg dein eigenes Material hinzu und der Agent baut das Video.

Prompt melden

Prompt

Konzept

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.

Ablauf

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.

Bildaufbau

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.

Techniken

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.

Musik

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.

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.

Referenzen

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.

Was du vorbereiten solltest

  • Dein Logo oder Dein App-Icon, quadratisch, idealerweise auf transparentem Hintergrund; es erscheint in der Island-Pille und wächst zum Cover des Players.

Weitere Prompts

Vorschau des Prompts „Nahtloser 15-Sekunden-App-Showreel in purer Motion Graphics“Simple Motion

Nahtloser 15-Sekunden-App-Showreel in purer Motion Graphics

<direction> Erstelle einen 15-sekündigen Motion-Graphics-Showreel im Querformat für meine App, 1920x1080 bei 60 fps. Alles ist gezeichnete Grafik, ohne Filmmaterial. Das Einzige, was ich beisteuere, ist das Logo meiner App (ein App-Icon als abgerundetes Quadrat). Die Idee ist eine durchgehende Bewegung, bei der jeder Abschnitt sein letztes Objekt an den nächsten weitergibt. Ein Punkt wird zum Logo, das Logo wird zum Namen, die Buchstaben werden zu Punkten, die Punkte werden zu Rennbällen, ein Ball flutet das Bild, eine Form zerfällt in Kacheln, die Kacheln werden zu einer 3D-Punktwolke, und dann folgen kinetische Wörter und eine Endkarte. Jeder Abschnitt zeigt eine Motion-Fähigkeit. Verwende flache Farben, klare Vektorformen und ein Kamerasucher-HUD über allem, mit Schnitten, die auf einen 128-BPM-Track abgestimmt sind. Vermeide Filmmaterial, Verläufe und Texturen, Voice-over und jeden Abschnitt, der aus dem Nichts beginnt, statt aus dem vorherigen herauszuwachsen. </direction> <structure> 1. 0–1,9 s, fast schwarz: Ein pinker Punkt sitzt in einem dünnen grauen Ring, und der Ring öffnet sich mit expo.out. Ein zweiter Ring rollt zu einem schwachen großen Kreis aus (0,45 s, expo.out). Bei 0,5 s wächst mein Logo aus dem Punkt, seine Ebenen poppen nacheinander mit back.out auf. Bei 0,92 s setzt es sich größer und dreht sich dabei sanft. Ein dünner pinker Ring aus kreisendem Mono-Text ("APP NAME · IDEAS IN MOTION · APPNAME.APP ·", ersetze ihn durch deinen) erscheint darum und dreht sich langsam. Bei 1,7 s schrumpft das Zeichen mit leichter Unschärfe zurück zu einem kleinen hellen Punkt. 2. 1,9–3,5 s: Beim Drop bei 1,93 s platzen zwei Scheiben aus dem Punkt, zuerst die helle und die pinke 30 ms dahinter (expo.out, 0,3 s), sodass ein dünner heller Ring auf dem pinken Rand reitet. Der Name meiner App in der breiten Grotesk steigt Buchstabe für Buchstabe von der Grundlinie auf: Jeder Buchstabe ist auf seine eigene Box beschnitten, mit 30 ms Versatz und 0,26 s expo.out. Der Name füllt immer dieselbe Breite von 1640 px. Eine dünne dunkle Linie zeichnet sich von der Mitte darüber, mit "01", das links eingetippt wird, und meiner Webadresse rechts. Ab 2,55 s läuft eine Breitenwelle durch die Buchstaben: Jeder staucht sich von 150 % auf etwa 55 % Breite und zurück in 0,6 s, 0,1 s nach dem vorherigen. Das Wort wird in jedem Frame auf 1640 px neu angepasst, sodass schmale Buchstaben höher werden. Bei 2,84 s steigt darunter ein heller Serif-Kursiv-Slogan ("ideas in motion") Wort für Wort auf. Bei 3,3 s kollabieren die Buchstaben zu dunklen Punkten und der Slogan fällt weg. 3. 3,5–5,6 s: Ein diagonaler heller Wipe kommt von unten rechts (0,16 s). Sechs dunkle Punkte schwingen in einer Kurve zum Anfang von sechs Zeilen (power2.inOut, versetzt) und nehmen die Zeilenfarben an. Ein Serif-Kursiv-Titel wird von links eingetippt ("Chat instead of a timeline."), mit einer Mono-Notiz rechts ("NO KEYFRAMES · LIVE PREVIEW") und Spurlabels "IDEA" und "MP4" an den beiden Enden. - Jede Zeile hat eine pinke Nummer, einen Mono-Namen ("animated type", "shapes", "transitions", "3D effects", "sound", "live preview"), ein winziges Kurvensymbol, das sich selbst zeichnet, und eine Spurlinie, die von links nach rechts gezeichnet wird. - Bei 4,215 s rasen sechs Bälle (dunkel, violett, pink, wiederholt) in genau 0,94 s 1040 px weit, jeder mit eigener Easing-Kurve: linear, power2.inOut, expo.out, back.out(1.7), elastic.out(1, 0.3) und bounce.out. - Striche über jeder Spur markieren, wo der Ball bei jedem 1/16 des Laufs war. Drei verblassende Geisterringe folgen jedem Ball, die Bälle strecken sich entlang ihrer Geschwindigkeit, ein Punkt fährt synchron auf jedem Kurvensymbol mit, und jeder Ball bekommt bei der Ankunft einen Outline-Halo. - Bei 5,3 s blenden die Zeilen aus, die Bälle fliegen in die Mitte und verschmelzen, und der violette schwillt an, bis er das Bild füllt. 4. 5,6–7,5 s, violett: Ein heller Kreis federt aus einem Punkt hoch (elastic.out, 0,45 s). Zwölf Satellitenpunkte schießen auf eine Umlaufbahn (expo.out, im Abstand von 12 ms). - Dahinter liegen dünne Fadenkreuz-Hilfslinien, ein gepunkteter Orbitkreis mit Teilstrichen und den Labels "270°" und "90°". - Mono-Anzeigen sitzen an den Seiten: "SHAPES NO KEYFRAMES" links und zitierte Änderungswünsche rechts ("“BIGGER” “SLOWER”", "“ANOTHER COLOUR”"). - Pinke Wellenringe pulsieren um den Kreis. - Die Form morpht dann Kreis → Dreieck → Stern → Quadrat. Jeder Morph dauert 0,26–0,3 s mit back.out(2,2) und einer 120°-Drehung, und pinke Echo-Umrisse folgen der Form nur, solange sie sich dreht. - Die Satelliten morphen einen Schlag später, nacheinander, und verschwinden bei 7,22 s. Sie kommt als aufrechtes 360-px-Quadrat zur Ruhe. 5. 7,5–9,75 s, fast schwarz: Das Quadrat teilt sich in neun 120-px-Kacheln. Ein Truchet-Labyrinth wächst Ring für Ring, bis es das Bild füllt (back.out, etwa 30 ms pro Ring); jede Kachel hat zwei Viertelkreisbögen in gegenüberliegenden Ecken, gezeichnet als helle 20-px-Linien. Pinke Wellen ziehen darüber: erst zwei Bänder von links nach rechts, dann ein Ring, der sich auf die Mitte zusammenzieht. Kacheln innerhalb einer Welle drehen sich um 90 oder 180 Grad, schrumpfen auf 80 % und werden pink, sodass die Linien in Striche zerfallen, und kehren zurück, sobald das Band vorbei ist. Ein kleines Mono-Label wird unten eingetippt ("SHAPES · TRANSITIONS · NO KEYFRAMES"). Ab 9,45 s kollabieren die Kacheln von der Mitte nach außen. 6. 9,5–11,25 s: Ein 24 x 24 Punktraster erscheint, wo die Kacheln waren, von oben gesehen. Es kippt in eine perspektivische Ebene und faltet sich zu einer Kugel, einer Vase, einem gequetschten Klecks und einem Torus, während es sich um seine Vertikalachse dreht. Zwischen den Formen bewegt es sich mit power2.inOut, mit schwachen Linien zwischen Nachbarn, etwa jeder neunte Punkt ist pink, und Punkte werden mit der Tiefe dunkler. Ein Mono-Label sitzt darunter ("3D EFFECTS · LIVE PREVIEW · MP4 EXPORT"). Es zoomt durch die Kamera und blendet bei 11 s aus. 7. 11,25–13,0 s, kinetische Wörter: ein Wort alle 0,23 s, jedes auf eigenem flachem Hintergrund und jedes füllt die Breite in einer anderen Breite derselben Schrift. Ersetze die sechs Wörter durch deinen eigenen Satz. - "IDEA": dunkel auf Pink, gleitet von links herein, Skalierung 1,3 auf 1, Unschärfe klärt sich in 0,14 s. - "IN.": hell auf Fast-Schwarz mit pinkem Punkt, kommt mit Unschärfe von rechts, und eine kleine Mono-Notiz oben links ("EDIT IN WORDS ↗"). - "VIDEO": ultra-schmal violett auf heller Seite, Buchstaben steigen von unten auf, 25 ms versetzt. - "OUT.": hell auf Violett, mit Unschärfe von links, mit einer Notiz oben rechts ("↘ MP4 EXPORT"). - "NO": dunkel auf Gelb. Die Buchstaben fallen in Winkeln mit back.out herein, dann füllen umrandete Kopien des Wortes Zeilen oberhalb und unterhalb und scrollen in wechselnden Richtungen, während die Hauptzeile nach links driftet. - "KEYFRAMES.": hell auf Fast-Schwarz, gleitet mit konstanter Geschwindigkeit nach links mit einer dünnen diagonalen Linie, dann verschwindet es schnell mit Unschärfe. 8. 13,0–15 s, Endkarte: Pink flutet von rechts herein, und ein heller Ring rollt aus der Mitte aus (0,42 s). Mein Logo dreht sich in der Mitte herein (back.out) mit einem kleinen Konfetti-Burst aus Punkten, Ringen und Dreiecken in Dunkel, Hell und Violett, dann wandert es links neben das Lockup. Der Name meiner App fällt Buchstabe für Buchstabe daneben herein, von unscharf zu scharf, je 0,22 s. Darunter steigt ein Serif-Kursiv-Slogan auf ("your AI motion designer"). Eine Linie wird gezeichnet, und darunter wird eine Mono-Zeile eingetippt: "PICK A TEMPLATE · DESCRIBE YOUR IDEA · MP4 EXPORT", ein kleiner Aufnahmepunkt, dann meine Webadresse rechts. Halte die letzte Sekunde. </structure> <composition> Palette, alles flach: - tiefes Fast-Schwarz #0d0b1e - knalliges Pink #fb2d89 (die Hauptakzentfarbe) - helle Seite #faf9ff - weiches Violett #7c6cf2 - warmes Gelb #ffd23f, nur für einen kinetischen Schnitt Schriften: - Eine breite variable Grotesk mit Breitenachse (Anybody, Gewicht 900, Breite 50–150 %) für den Namen und die kinetischen Wörter. - Eine schmale redaktionelle Serif-Kursive (Instrument Serif Italic) für Titel und Slogans. - Eine Mono (JetBrains Mono) für die Interface-Labels, 14 px, Zeichenabstand 0,16em. Ein Kamerasucher-HUD liegt über dem ganzen Video: - Dünne 2-px-Eckklammern, 44 px von jeder Ecke eingerückt. - Oben links: der Name meiner App in fetten Mono-Versalien mit einem blasseren Slogan dahinter ("APP NAME IDEAS IN MOTION"). - Oben rechts: das aktuelle Abschnittslabel ("01 — APP NAME", "02 — NO KEYFRAMES", "03 — SHAPES", "04 — EDIT IN WORDS", "05 — 3D EFFECTS", "06 — KINETIC TYPE", "07 — TRY IT FREE"). - Unten links: ein laufender Timecode mit Frames ("00:00:03:09") und ein kurzer Slogan ("LIVE PREVIEW"). - Unten rechts: ein weiterer Slogan ("NO KEYFRAMES"), vier kleine Quadrate, die pro Beat eins aufleuchten, und "MP4". - Entlang des unteren Rands: eine 2-px-Fortschrittslinie, die mit der Zeit wächst. Das HUD wechselt bei jedem Schnitt zwischen dunkler und heller Tinte, damit es auf jedem Hintergrund lesbar ist. Alle Wörter auf dem Bildschirm sind Beispiele, die du durch deine eigenen ersetzen sollst. </composition> <techniques> - Jeder Abschnitt endet mit einem Objekt, aus dem der nächste wächst: Punkt zu Logo, Logo zurück zu Punkt, Scheiben zu Name, Buchstaben zu Punkten, Punkte zu Bällen, Ball zu violetter Flut, Quadrat zu Kacheln, Kacheln zu Punktraster, Punktwolke, die durch die Kamera in die kinetischen Wörter zoomt. - Jedes neue HUD-Abschnittslabel tippt sich über 0,3 s ein, mit zufälligen Zeichen, die dem Cursor vorauslaufen. Die anderen Mono-Zeilen werden ebenfalls eingetippt. - Variable-Breite-Schrift: Animiere die Breitenachse jedes Buchstabens und passe das ganze Wort in jedem Frame an eine feste Breite an. - Buchstaben-Reveals werden auf die eigene Box jedes Buchstabens beschnitten. - Verwende leichte Bewegungsunschärfe nur bei schnellen Bewegungen und einen schwachen violetten Farbsaum beim großen Irisblenden-Wipe. - Echo-Umrisse, Geisterringe und Halos sind dünne pinke oder passend gefärbte Striche, die schnell verblassen. </techniques> <music> Energetischer elektronischer Synth-Pop mit 128 BPM, Schlag eins bei 0,06 s, genau 15 s lang: - Weiche glockenartige Pad-Akkorde im ersten Takt. - Nach dem Drop bei 1,93 s eine Four-on-the-Floor-Kick mit Claps auf 2 und 4, Off-Beat-Hi-Hats, ein druckvoller Synthbass und kurze Akkord-Stabs unter den Abschnitten. - Ein Break ab etwa 10 s, der sich in den kinetischen Abschnitt steigert. - Ein klingender finaler Pad-Akkord auf der Endkarte. Abschnitte wechseln an Taktgrenzen, der Name landet auf dem Drop bei 1,93 s, und die Schnitte der kinetischen Wörter liegen auf Achteln. </music> <sound> Keine Stimme. Hits über der Musik: - ein Riser durch den ersten Takt - ein Boom auf dem Drop bei 1,93 s - ein Riser ab etwa 10 s in einen Punch-Hit bei 11,25 s - eine Kick und ein kurzes Whoosh bei jedem kinetischen Wortschnitt - ein Beckenschlag bei 12,71 s - ein Boom mit dem klingenden Pad-Akkord, wenn die Endkarte landet - ein kleiner Blip bei 14,1 s Die Musik trägt den Track, und die Hits liegen klar darüber. </sound> <references> Ein Showreel eines Motion Designers, gekreuzt mit einem Tech-Produktlaunch-Sizzle. Es kombiniert ein Kamerasucher-Overlay, kräftige kinetische Typografie im Schweizer Stil, Easing-Kurven-Demonstrationen, generative Truchet-Kachelmuster und eine rotierende 3D-Punktwolke. </references>

Vorschau des Prompts „Produkterklärung als handgezeichnetes Drink-Rezept“Simple Motion

Produkterklärung als handgezeichnetes Drink-Rezept

<direction> Erstelle eine quadratische 30-Sekunden-Motion-Graphic (1080x1080, 30 fps) mit leichter Lounge-Musik, verspielten Soundeffekten bei jeder Aktion und ohne Stimme. Es ist ein handgezeichnetes „Rezept“-Erklärvideo für mein Produkt: Seine Schritte werden als Drink gezeigt, der Schritt für Schritt in einem Glas entsteht. Es ist eine einzige durchgehende illustrierte Szene ohne Schnitte, alles verändert sich an Ort und Stelle. Der Look ist eine flache 2D-Illustration auf einer blassen lavendel-weißen Seite, mit tiefschwarz-blauen Tintenkonturen, die wie in handgezeichneter Animation „kochen“, und klobigen Cartoon-Versalien im Sticker-Stil. Ersetze jedes Wort in Anführungszeichen unten durch die eigenen Worte meines Produkts und behalte jeweils etwa dieselbe Länge, damit das Layout hält. Vermeide Schnitte, Kamerabewegungen, Schattierungen oder Verläufe jenseits der flachen Füllungen und Voice-over. </direction> <structure> Das Tempo ist ruhig und gleichmäßig. Das Intro ist schnell und federnd, jedes Eingießen dauert gleichmäßige 5 s, das Rühren und die Zeste laufen etwas schneller, und das Finale hält 3 s. Jeder Kartenwechsel liegt auf einem Schlag der 120-BPM-Musik: 6,0, 11,0, 16,0, 21,0, 24,5 und 27,0 s. - 0–2,5 s, Titel: „YOUR BRAND“ (durch deine Marke ersetzen) steht groß in der Mitte, etwa 920 px breit. Ab 0,15 s stempeln sich seine Buchstaben einzeln an ihren Plätzen ein, über 0,83 s. Jeder beginnt mit 10 % Größe, 22 px tiefer und um ±8–14° gekippt und landet in 0,36 s mit weichem Überschwingen (back.out 1.7). Bei 1,4 s blendet darunter eine kleine Zeile „what your product is“ ein, die bei 2,45 s wieder ausblendet. - 2,5–3,6 s, Übergabe: Der Titel steigt 365 px und schrumpft in 0,8 s (power3.inOut) auf 58 %, um zur Kopfzeile zu werden. Währenddessen zeichnet sich ab 2,87 s das Glas wie eine Federskizze selbst: linke Wand, rechte Wand, Randellipse, dann die Bodenkurve, insgesamt etwa 0,4 s. Seine Füllung blendet dann ein (0,28 s), und der Untertitel der Kopfzeile blendet unter dem Titel ein. - 3,6–6,0 s, Schritt 1: Die Karte kommt mit 4° Neigung und schnellem Einblenden (0,15 s) herein, und ihr großer Wert stempelt sich von selbst ein. Die Karte lautet „STEP 01“, „PICK“, „TEMPLATE“ und „vertical, horizontal or square“. Die Fortschrittsleiste blendet mit dem ersten aktiven Kreis ein. Drei Eiswürfel fallen von oberhalb des Bildes im Abstand von 0,35 s hinein. Jeder fällt mit Schwerkraft (power2.in, etwa 0,3 s), springt etwa 140 px hoch, hüpft 20 px und setzt sich: zwei am Boden und einer oben. Drei kleine Funkenstriche blitzen über jedem Würfel auf, wenn er den Rand passiert. Jede Landung füllt ein Drittel des Fortschrittsbalkens der Karte und fügt ein Wort des Status „three short words“ hinzu. - 6,0–21,0 s, Schritte 2–4: drei Eingießvorgänge von je 5 s, alle nach demselben Muster. Die Karten lauten „STEP 02 / SAY / KINETIC TYPE / tell the chat what to show“, dann „STEP 02 / SAY / SHAPES / the agent builds the animation“, dann „STEP 02 / SAY / SOUND / music and sound effects to the rhythm“. Eine Flasche gleitet von links herein (0,23 s) und steht. Dann kippt sie auf einem kleinen Bogen auf 115°, erst ein wenig nach oben und dann nach unten zum Gießpunkt (0,37 s), und gießt einen geschwungenen Strahl ins Glas. Die Flaschen sind lavendelfarben, dann pink, dann tiefes Tintenblau. Jede hat ein weißes Etikett mit meinem Logo als kleines Symbol mit abgerundetem Quadrat, einem Wort („TYPE“, „SHAPES“, „SOUND“) und einer kleinen Zeile („kinetic“, „3D effects“, „music“). Neben dem Glas erscheint eine graue Zielmarke („01“, dann „02“, dann „03“) mit einer gestrichelten Linie darüber. Der Drink steigt in 2 s (sine.inOut) bis zu dieser Marke, das Eis schwimmt mit auf, und Spritzer hüpfen dort, wo der Strahl auftrifft. Der Drink beginnt klar weiß, wird mit dem zweiten Eingießen pink und mit dem dritten tiefes Magenta (Pink gemischt mit tiefem Tintenblau), wobei jede Farbe etwa 1,3 s lang überblendet. Der Fortschrittsbalken füllt sich, und „live preview“ tippt sich in zehn Schritten selbst. Dann wird die Marke pink, das obere Ende des Strahls löst sich und fällt hinein, und die Flasche kippt zurück und gleitet hinaus. - 21,0–24,5 s, Schritt 5: Die Karte lautet „STEP 03 / REFINE / IN WORDS / “bigger”, “slower”, “another colour”“. Ein leichter Barlöffel mit Kugelende fällt mit schnellem Ease-out hinein. Er schaukelt in einem 0,8-s-Zyklus um 8° hin und her, während die Würfel sich stoßen und dunkler werden, dann hebt er sich heraus. Der Balken füllt sich in 4-Frame-Schritten, während „live preview“ getippt wird. - 24,5–27,0 s, Schritt 6: Die Karte lautet „STEP 03 / MP4 / EXPORT / download the MP4“. Eine orange Zestenspirale poppt über dem Glas auf, dreht sich und staucht sich etwa 0,8 s lang, während orange Tropfen fallen. Dann gleitet sie auf den Rand (0,5 s, power2.inOut), während „try it free“ fertig getippt wird. - 27,0–30 s, Finale: Die Karte baut sich neu auf als „YOUR TAGLINE / OPEN APP / YOURSITE.COM / pick · describe · refine“. Sieben kurze pinke und orange Striche schießen um das Glas heraus (0,16 s) und „atmen“ sanft weiter ein und aus. Das Glas wächst in 0,6 s um 4 % und hält bis zum Ende. </structure> <composition> Farben: - Seite: blasses Lavendel-Weiß (#FAF9FF). - Konturen: tiefes Tintenblau (#1C0B5D), etwa 3 px mit runden Enden. - Glas: Lavendel (#F0EDFF) mit violett getöntem Boden. - Eiswürfel: abgerundete Quadrate, weiß mit 40 % über dem, was dahinter liegt, mit einer inneren Eckenlinie. - Karten: weiß mit weichem lavendelfarbenem versetztem Schatten. - Orange (#FE9117): die Garnitur und die Hälfte der Finale-Striche. Schrift: - Display-Schrift: klobige Cartoon-Versalien (etwa wie Lalezar) als Sticker gesetzt. Die Vorderseite ist pink (#FB2D89), mit einer tiefblauen Tintenkontur dahinter und einer violetten Extrusion (#7C6CF2), nach links unten versetzt. - Kleiner Text: eine freundliche Druckhandschrift (etwa wie Playpen Sans), gedämpftes Purpurgrau (#6B6385) für Fließtext und Pink für Labels. Layout nach dem Intro: - Kopfzeile: oben mittig, etwa 540 px breit, mit einer kleinen Zeile darunter: „first benefit · second benefit · third benefit“. - Glas: ein konisches Whiskyglas links der Mitte, etwa 290 px breit, Rand bei y 457 und Boden bei y 797. - Infokarte: rechts, 390x248 px mit 14 px Ecken und tiefblauem Rand. Von oben nach unten enthält sie einen kleinen pinken Kicker, den großen Sticker-Buchstaben-Wert, einen Titel in dunklen Versalien, eine handgeschriebene Zeile und einen pillenförmigen Fortschrittsbalken mit einem kurzen Statuswort rechts davon. - Fortschrittsleiste: sechs Schritte am unteren Rand. Die Kreise sind 43 px breit und 156 px voneinander entfernt auf einer dünnen Schiene, mit kleinen Kapitälchen-Labels darunter: „TEMPLATE“, „TYPE“, „SHAPES“, „SOUND“, „REFINE“, „EXPORT“. </composition> <techniques> - Kochende Linien: Jede gezeichnete Linie bekommt ein sanftes Wackeln von 1–2 px, das alle 4 Frames zu einem neuen Wackeln wechselt, im gesamten Stück, wie eine Turbulenzverschiebung über den Linien. - Karten-Neuaufbau: Im ersten Frame jedes Schritts zeigt sich für einen Frame nur der neue große Wert, dann poppt die Karte zurück. Der große Wert stempelt sich von selbst ab 72 % Größe mit back.out-Überschwingen ein. - Tippen: Statuswörter tippen sich in Schritten selbst. - Fortschrittsleiste, aktueller Schritt: Sein Kreis hat einen tiefblauen Ring, einen pinken Punkt und ein pinkes Label und „atmet“ jede Sekunde zwischen 100 % und 112 %. - Fortschrittsleiste, abgeschlossener Schritt: etwa 0,1 s vor der nächsten Karte füllt sich sein Kreis pink, und ein weißer Haken zeichnet sich in 0,17 s. Sein Label wird tiefblau, und die Schiene zum nächsten Kreis füllt sich in 0,37 s pink. - Fortschrittsleiste, kommende Schritte: Sie bleiben gedämpft mit einem kleinen grauen Punkt. </techniques> <music> Ein warmes, entspanntes Lounge-Pop-Instrumental mit 120 BPM in Dur: Besenschlagzeug, runder Kontrabass, Vibraphon, Pizzicato-Streicher, Fingerschnipsen und ein wenig Shaker. Halte es spärlich ohne Leitmelodie, damit es unter den Effekten sitzt. Es beginnt mit ein paar gezupften Vibraphon- und Pizzicato-Noten ohne Schlagzeug, und bei 2 s setzt ein sanfter Bass ein. Der volle Besen-Groove mit Walking Bass setzt genau auf der ersten Eingieß-Karte bei 6,0 s ein. Er bleibt gleichmäßig durch die Eingießvorgänge, das Rühren und die Zeste, setzt bei 28,0 s einen abschließenden Akkordschlag, wenn sich das fertige Glas beruhigt, und klingt bis zum Ende aus. Mach ihn genau 30 s lang, gemischt auf etwa -14 LUFS mit True Peak unter -1 dBTP. </music> <sound> Keine Stimme. Jeder Effekt sitzt auf seinem Frame, deutlich über der Musik; die Musik muss nie lauter werden, um Platz zu machen. - Titel: ein weiches Plopp für jeden Buchstaben, leicht in der Tonhöhe steigend und von links nach rechts im Panorama wandernd, während das Wort entsteht. - Übergabe: ein sanftes Whoosh unter dem Aufsteigen des Titels und ein leises Bleistiftkratzen für jeden Strich, während sich das Glas zeichnet. - Karten: ein Papierschnipsen und ein weicher Schlag, jedes Mal wenn eine Karte ausgeteilt wird und ihr großes Wort einstempelt. - Eis-Landungen: ein hartes, kurzes Klopfen von Eis am Glas für jeden Würfel, mit zwei oder drei Kontakten im Abstand von wenigen Millisekunden und einem tiefen Dumpfen unter dem Fall. Weicher für den Aufprall und kleiner für den letzten Hüpfer, jeder Schlag deutlich abgehoben von der Musik. - Flaschen: ein sanftes Whoosh, wenn jede Flasche hereingleitet, und erneut, wenn sie kippt. - Eingießen: jedes deutlich hörbar und anders. Zuerst ein sprudelnder, spritzender klarer Strahl, der das Eis anstößt, dann ein vollerer Strahl in schnellen Glucksern, dann ein dunkler, sirupartiger in langsamen, tiefen Glucksern. Gib jedem Eingießen Körper im Bereich von 1–4 kHz, wo der Strahl und die klingende Lufttasche des Glases sitzen, sodass es dort etwa 8 dB über den Sekunden davor und danach liegt. Halte sie sauber: überwiegend klingendes Glas und Blasen, wenig Zischen. - Rund um jedes Eingießen: Die Tonhöhe der Lufttasche steigt von Eingießen zu Eingießen, während sich das Glas füllt, und nach jedem fallen ein paar letzte Tropfen. Die Musik wird unter jedem Eingießen um etwa 5 dB abgesenkt und kommt sanft zurück, und ein Whoosh folgt der Flasche hinaus. - Fortschrittsleiste: ein sanfter Zwei-Ton-Bestätigungsklang, sobald ein Schritt abgehakt wird, für den letzten etwas lauter. - Löffel: ein metallisches Klirren, wenn er hineinfällt, Eis, das an jedem Ende seines Schwungs ans Glas klopft, und ein Whoosh, wenn er herausgehoben wird. - Zeste: ein Zupfen, wenn sie aufpoppt, drei feine Sprühnebel, während sie sich dreht, und ein sanftes Tippen, wenn sie auf dem Rand landet. - Finale: ein heller Klang mit dem Ausbruch der Striche, über einem leisen gläsernen Schimmern bis zum Ende. - Endmischung: etwa -14 LUFS, True Peak unter -1 dBTP. </sound> <references> Handgezeichnete Cel-Animation mit kochenden Linien, flache App-Erklärvideos im Sticker-Stil und Cocktailrezept-Illustrationen, in denen jede Zutat für eine Funktion steht. </references>

Vorschau des Prompts „3D-App-Wand-Tauchgang in eine Produktdemo in drei Schritten“Simple Motion

3D-App-Wand-Tauchgang in eine Produktdemo in drei Schritten

<direction> Erstelle eine 31 Sekunden lange horizontale Produktdemo in 1280x720, komplett aus Animation gebaut, mit Ton. Sie läuft als eine durchgehende Kamerabewegung ohne Schnitte und loopt nahtlos: Das letzte Bild landet auf dem ersten. Die Idee: Eine Wand aus App-Screens, im 3D-Raum nach hinten geneigt, die Kamera taucht in einen Screen ein, dieser Screen wird zum App-Fenster, und drei nummerierte Schritte zeigen, was das Produkt kann, bevor eine Endkarte mit meinem Logo folgt. Der Look ist klar und modern: flache Vektor-UI, von dir gezeichnet, weiche Tiefe, viel Raum, ruhige und präzise Bewegung. Vermeide harte Schnitte, echtes Filmmaterial, Stockbilder, unruhige Hintergründe, federnde oder cartoonhafte Easings und alles, was den Loop unterbricht. </direction> <structure> Anfang, ca. 0 bis 4 s: Eine im 3D-Raum nach hinten geneigte Wand aus App-Screens driftet langsam. Ein zentrierter Titel wie "Your ideas, in motion" (durch deinen ersetzen) liegt darüber und verschwindet dann in Unschärfe. Eintauchen, ca. 4 bis 6 s: Die Kamera fährt in einen Screen hinein, der wächst, zum App-Fenster wird und sich auf einer Seite des Bildes einpendelt. Beat 01, ca. 6 bis 13 s: Eine kleine Schrittnummer "01" und eine Überschrift wie "Sketch your idea" (durch deine ersetzen) gleiten zeilenweise neben dem Fenster nach oben. Im Fenster zieht sich ein Pinselstrich über die Leinwand. Beat 02, ca. 13 bis 20 s: Der vorherige Text gleitet nach oben hinaus, dann gleiten "02" und eine Überschrift wie "Chat to shape it" genauso hinein. Der Fensterinhalt wechselt passend. Beat 03, ca. 20 bis 26 s: "03" und eine Überschrift wie "Export in one click" kommen auf dieselbe Weise, und das Fenster zeigt ein Terminal, das Textzeilen mit blinkendem Cursor tippt. Endkarte, ca. 26 bis 31 s: mein Logo und "[your brand]" mit einem kurzen Slogan wie "Make it move" (durch deinen ersetzen). Danach fährt die Kamera zurück zur geneigten Screen-Wand, sodass das letzte Bild dem ersten entspricht und das Video loopt. </structure> <composition> Halte das Fenster groß, etwa 60 % der Bildbreite, auf einer Seite. Setze die Textspalte linksbündig auf die andere Seite. Platziere die Schrittnummer klein, in der Akzentfarbe, über der Überschrift. Setze Überschriften in einer fetten, klaren Sans-Serif, höchstens zwei kurze Zeilen, mit leichterem Schnitt für eine unterstützende Zeile. Verwende mein Logo als App-Icon in der Fensterleiste und zentriert auf der Endkarte. Nutze rollenbasierte Farben aus meiner Marke, zum Beispiel einen fast schwarzen Hintergrund (#0E0F13), gebrochen weißen Text (#F4F4F6), einen leuchtenden Akzent für Schrittnummern, Highlights und den Pinselstrich und ein gedämpftes Grau für Fensterrahmen und sekundäre UI. Halte die Screen-Wand in derselben Palette mit geringerem Kontrast, damit der Titel darüber lesbar bleibt. </composition> <techniques> Alles geschieht innerhalb einer durchgehenden Kamerabewegung: ein langsamer Drift über die 3D-Wand, die etwa 25 Grad nach hinten geneigt ist, mit sanfter Parallaxe zwischen den Screens. Der Titel verschwindet mit zunehmender Unschärfe und Ausblendung über etwa 0,6 s. Das Eintauchen ist ein sanfter Ease-in-out-Push in einen Screen, der dabei skaliert und sich zum App-Fenster abflacht. Überschriftzeilen gleiten etwa 30 px nach oben und blenden ein, um etwa 0,1 s versetzt, mit weichem Ease-out. Ausgehender Text gleitet nach oben und blendet aus, bevor der nächste Schritt hereinkommt. Der Fensterinhalt wechselt an Ort und Stelle mit kurzen Überblendungen und Slides. Der Pinselstrich wird fortlaufend gezeichnet. Das Terminal tippt Zeichen für Zeichen mit blinkendem Cursor. Auf der Endkarte skaliert das Logo sanft ein, dann gleitet die Kamera zurück zur Eröffnungswand für einen nahtlosen Loop. </techniques> <music> Verwende einen instrumentalen, ruhigen Synthwave-Track mit etwa 100 BPM, genau 31 Sekunden lang, mit Schnitten und Akzenten auf dem Beat-Raster. Ein warmer Pad liegt unter dem Titel. Der Beat setzt mit einem weichen Boom ein, wenn die Kamera ins Fenster eintaucht. Der Track hebt sich für Beat 02 leicht und wird unter dem Terminal dünner. Ein Riser führt in die Endkarte, und der Track löst sich auf, sodass der Loop zurück zum Anfang nahtlos ist. Ziele auf etwa -14 LUFS mit True Peak unter -1 dBTP. </music> <sound> Füge ein Whoosh beim Eintauchen ins Fenster hinzu, einen weichen UI-Tick, wenn jede Überschriftzeile landet, ein leichtes Pinselrauschen beim Strich in Beat 01 und leise Tastaturtipp-Geräusche unter dem Terminal-Tippen. Füge einen sanften Impact oder Chime hinzu, wenn das Logo auf der Endkarte landet. Halte die Effekte unter der Musik, ohne Sprecher. </sound> <references> Es erinnert an eine polierte App-Launch- oder Walkthrough-Animation: eine Kamera, die über ein 3D-Raster aus UI-Screens in ein sauberes Produktfenster fliegt, mit nummerierten Feature-Schritten, wie in modernen Software-Landingpage-Demos. </references>

Motion Fab - Describe a video in chat, an AI agent animates it | Product Hunt

Notwendige Cookies speichern deine Website-Einstellungen. Mit deiner Erlaubnis hilft uns Google Analytics zu verstehen, wie Motion Fab genutzt wird. Du kannst deine Wahl in der Fußzeile ändern.

Deine Datenschutz-Optionen nach den geltenden Datenschutzgesetzen der US-Bundesstaaten. Datenschutzerklärung

Notwendige Cookies speichern deine Website-Einstellungen. Mit deiner Erlaubnis hilft uns Google Analytics zu verstehen, wie Motion Fab genutzt wird. Du kannst deine Wahl in der Fußzeile ändern.

Deine Datenschutz-Optionen nach den geltenden Datenschutzgesetzen der US-Bundesstaaten. Datenschutzerklärung