dein KI-Motion-Designer

DE

App öffnen beta

Simple Motion

Produkterklärung als handgezeichnetes Drink-Rezept

Ein quadratisches handgezeichnetes Erklärvideo, das die Schritte eines Produkts als Drink im Glas zeigt: Eis fällt, drei Flaschen gießen, ein Löffel rührt, eine Zeste landet.

Veröffentlicht 10. November 2026

Prompt verwenden

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

Konzept

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.

Ablauf

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.

Bildaufbau

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“.

Techniken

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.

Musik

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.

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.

Referenzen

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.

Was du vorbereiten solltest

Dein Logo oder App-Symbol, ein einfaches quadratisches Zeichen, das auch klein gut lesbar ist; es erscheint auf den weißen Etiketten der drei Flaschen.

Die Motion-Design-Kniffe, aus denen das Video besteht, jeweils mit eigenständigem Code, den du im Browser öffnen oder deinem Agenten geben kannst.

Vorschau der Technik „Zittern handgezeichneter Linien“ — Bei 0:16 im Video

Textur

Zittern handgezeichneter Linien

Jede gezeichnete Linie wackelt um ein bis zwei Pixel und springt alle 4 Frames in ein neues Wackeln, wie bei handgezeichneter Animation, in der jede Zeichnung neu nachgezogen wird. Ein SVG-Filter (feTurbulence mit baseFrequency 0.016, eine Oktave, danach feDisplacementMap mit scale 3.6) liegt auf den Konturen, und die pausierte Timeline schaltet den Turbulence-Seed alle 4/30 s weiter, sodass das Zittern durchsuchbar ist und auf ganzen Frames landet.

Wann einsetzen Um flachen Vektorzeichnungen, Konturen und Displayschrift eine handgemachte Skizzenbuch-Anmutung zu geben.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zittern handgezeichneter Linien</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <svg width="0" height="0" style="position:absolute"><filter id="boil" x="-10%" y="-10%" width="120%" height="120%"><feTurbulence id="boilNoise" type="fractalNoise" baseFrequency="0.016" numOctaves="1" seed="1" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="3.6" xChannelSelector="R" yChannelSelector="G"/></filter></svg>
  <svg class="art clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080"><g transform="translate(188 40)" filter="url(#boil)"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g></svg>
</div>
<script>
const DURATION = 4;
const tl = gsap.timeline({ paused: true });
// Boil: a new noise seed every 4 frames at 30 fps (7.5 drawings a second, whole frames each).
for (let k = 0; k * 4 / 30 < DURATION; k++) tl.set("#boilNoise", { attr: { seed: 1 + (k % 9) } }, k * 4 / 30);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „Sticker-Buchstaben poppen nacheinander auf“ — Bei 0:00 im Video

Typografie

Sticker-Buchstaben poppen nacheinander auf

Ein wuchtiger Titel wird zunächst komplett gesetzt, dann stempelt sich jeder Buchstabe an seinem Platz ein: von scale 0.1, 22 px tiefer und gekippt (abwechselnd -14 bis +12 Grad) in 0.36 s mit back.out(1.7) in die Ruhelage, ein Buchstabe alle 0.14 s. Jeder Buchstabe ist ein Sticker: rosa Füllung, eine dunkle Kontur dahinter per text-stroke auf ::before und eine violette Extrusion, nach links unten versetzt, auf ::after.

Wann einsetzen Für eine verspielte Titelenthüllung, die Buchstabe für Buchstabe gelesen wird, ohne das Layout des Wortes zu verschieben.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sticker-Buchstaben poppen nacheinander auf</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#word { position: absolute; left: 0; right: 0; top: 440px; text-align: center; font: 176px/1 "Lalezar", sans-serif; letter-spacing: -4px; white-space: nowrap; --sw: 7px; --sd: 7px; --ssw: 2.6px; }
.pop { position: relative; display: inline-block; color: #FB2D89; isolation: isolate; }
.pop::before, .pop::after { content: attr(data-ch); position: absolute; left: 0; top: 0; }
.pop::before { z-index: -1; color: #1C0B5D; -webkit-text-stroke: var(--sw) #1C0B5D; }   /* outline, behind the fill */
.pop::after { z-index: -2; transform: translate(calc(-1 * var(--sd)), var(--sd)); color: #7C6CF2; -webkit-text-stroke: var(--ssw) #1C0B5D; } /* extruded depth */
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <div id="word" class="clip" data-start="0" data-duration="3"></div>
</div>
<script>
const TEXT = "HELLO";            // the word
const START = 0.15, STAGGER = 0.14;   // first letter, gap between letters (s)
const word = document.getElementById("word");
for (const ch of TEXT) { const s = document.createElement("span"); s.className = "pop"; s.dataset.ch = ch; s.textContent = ch; word.appendChild(s); }
const tl = gsap.timeline({ paused: true });
gsap.utils.toArray("#word .pop").forEach((el, i) => {
  const t0 = START + i * STAGGER, tilt = [-14, 10, -8, 12, -10, 8, -12][i % 7];
  gsap.set(el, { opacity: 0 });
  tl.set(el, { opacity: 1 }, t0);
  tl.fromTo(el, { scale: 0.1, y: 22, rotation: tilt }, { scale: 1, y: 0, rotation: 0, duration: 0.36, ease: "back.out(1.7)", immediateRender: true }, t0);
});
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „Haupttitel, der zur Kopfzeile aufsteigt“ — Bei 0:02 im Video

Layout

Haupttitel, der zur Kopfzeile aufsteigt

Der Eröffnungstitel steht mittig im Bild mit einer kleinen Zeile darunter; die Zeile blendet in 0.16 s aus, dann wandert der Titel 365 px nach oben und schrumpft in 0.8 s mit power3.inOut auf 0.576, symmetrisch um seinen Mittelpunkt, und wird zur Kopfzeile. Ein neuer dreiteiliger Untertitel blendet beim Ankommen in 0.4 s darunter ein, sodass das Intro ohne Schnitt ins Layout übergeht.

Wann einsetzen Wenn eine Intro-Karte zur dauerhaften Kopfzeile eines Erklärstücks werden soll.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Haupttitel, der zur Kopfzeile aufsteigt</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#titleBox { position: absolute; left: 40px; top: 378px; width: 1000px; height: 220px; }
#title { position: absolute; left: 0; width: 1000px; top: 36px; text-align: center; font: 176px/1 "Lalezar", sans-serif; color: #FB2D89; -webkit-text-stroke: 3px #1C0B5D; }
#intro, #sub { position: absolute; left: 0; width: 1080px; text-align: center; font-family: "Playpen Sans", sans-serif; color: #6B6385; }
#intro { top: 586px; font-size: 28.5px; }
#sub { top: 181px; font-size: 24px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <div id="titleBox" class="clip" data-start="0" data-duration="4"><div id="title">BIG IDEA</div></div>
  <div id="intro" class="clip" data-start="0" data-duration="4">a short line</div>
  <div id="sub" class="clip" data-start="0" data-duration="4">first part · second part · third part</div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
tl.fromTo("#intro", { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.24, ease: "power1.out" }, 0.3);
tl.to("#intro", { opacity: 0, duration: 0.16, ease: "power1.in" }, 1.35);
// The move: 0.8 s, power3.inOut, to the header place and size.
tl.fromTo("#titleBox", { y: 0, scale: 1 }, { y: -365, scale: 0.576, duration: 0.8, ease: "power3.inOut" }, 1.4);
tl.fromTo("#sub", { opacity: 0 }, { opacity: 1, duration: 0.4, ease: "power1.out" }, 2.1);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „Kontur zeichnet sich selbst, dann Füllung“ — Bei 0:03 im Video

Formen

Kontur zeichnet sich selbst, dann Füllung

Ein Objekt erscheint als Zeichnung: Seine Konturpfade werden nacheinander mit stroke-dashoffset gezeichnet (linke Wand 0.17 s, rechte Wand 0.14 s ab +0.10 s, Rand 0.20 s ab +0.20 s, Boden 0.17 s ab +0.23 s, power1.inOut), und erst danach blendet die Füllung in 0.28 s ein. Das Dash-Array ist die Pfadlänge plus 24, der Offset beginnt 12 hinter dem Ende, damit runde Linienenden vor Strichbeginn keinen Punkt hinterlassen.

Wann einsetzen Um ein gezeichnetes Objekt einzuführen, als hätte ein Stift es skizziert, bevor es Farbe und Inhalt bekommt.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kontur zeichnet sich selbst, dann Füllung</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080"><g transform="translate(188 40)">
    <g id="fills"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/></g>
    <path id="l" class="ink" d="M209,461 L234,786"/><path id="r" class="ink" d="M495,461 L470,786"/>
    <path id="rim" class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path id="b" class="ink" d="M234,786 Q352,808 470,786"/>
  </g></svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const START = 0.4;
const drawOn = (id, t0, dur) => {
  const el = document.getElementById(id), L = el.getTotalLength();
  tl.fromTo(el, { strokeDasharray: L + " " + (L + 24), strokeDashoffset: L + 12 }, { strokeDashoffset: 0, duration: dur, ease: "power1.inOut", immediateRender: true }, t0);
};
drawOn("l", START, 0.17);
drawOn("r", START + 0.1, 0.14);
drawOn("rim", START + 0.2, 0.2);
drawOn("b", START + 0.23, 0.17);
tl.fromTo("#fills", { opacity: 0 }, { opacity: 1, duration: 0.28, ease: "power1.out", immediateRender: true }, START + 0.4);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „Schrittkarte neu eingesetzt mit gestempeltem Wert“ — Bei 0:06 im Video

Übergang

Schrittkarte neu eingesetzt mit gestempeltem Wert

Jeder neue Schritt setzt die Infokarte neu ein, statt sie überzublenden: Im Frame des Schritts ist die Karte weg und nur der neue große Wert steht da, bei scale 0.72; der Wert federt in 0.3 s auf volle Größe (back.out(2.6)), während die Karte aus 4 Grad Neigung, scale 0.965 und Deckkraft null in 0.15 s (power2.out) zurückkehrt. Alter Inhalt verschwindet im selben Frame, nichts bleibt hängen.

Wann einsetzen Für Schritt-für-Schritt-Erklärungen, bei denen jeder neue Schritt wie eine frisch auf den Tisch gelegte Karte wirken soll.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schrittkarte neu eingesetzt mit gestempeltem Wert</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
#card, #bigs { position: absolute; left: 345px; top: 416px; width: 390px; height: 248px; }
#card .frame { position: absolute; inset: 0; border: 3px solid #1C0B5D; border-radius: 14px; background: #FFFFFF; box-shadow: 7px 8px 0 #F0EDFF; }
.pane { position: absolute; inset: 0; opacity: 0; }
.kicker { position: absolute; left: 27px; top: 32px; font: 17.5px/1 "Playpen Sans", sans-serif; color: #FB2D89; }
.name { position: absolute; left: 29px; top: 135px; font: 47px/1 "Lalezar", sans-serif; color: #1C0B5D; }
.note { position: absolute; left: 29px; top: 183px; font: 17.5px/1.2 "Playpen Sans", sans-serif; color: #6B6385; }
.big { position: absolute; left: 27px; top: 58px; font: 76px/1 "Lalezar", sans-serif; color: #FB2D89; -webkit-text-stroke: 2.5px #1C0B5D; opacity: 0; transform-origin: 30% 55%; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <div id="card" class="clip" data-start="0" data-duration="4"><div class="frame"></div>
    <div class="pane" id="p0"><div class="kicker">"STEP 01"</div><div class="name">"FIRST THING"</div><div class="note">"a short note about it"</div></div>
    <div class="pane" id="p1"><div class="kicker">"STEP 02"</div><div class="name">"NEXT THING"</div><div class="note">"another short note"</div></div>
  </div>
  <div id="bigs" class="clip" data-start="0" data-duration="4"><div class="big" id="b0">GO</div><div class="big" id="b1">NOW</div></div>
</div>
<script>
const STEPS = [0.6, 2.2];           // when each step arrives (s)
const tl = gsap.timeline({ paused: true });
gsap.set("#card", { opacity: 0 });
STEPS.forEach((s, i) => {
  tl.fromTo("#card", { opacity: 0, rotation: 4, scale: 0.965 }, { opacity: 1, rotation: 0, scale: 1, duration: 0.15, ease: "power2.out", immediateRender: false }, s);
  tl.set("#p" + i, { opacity: 1 }, s);
  tl.set("#b" + i, { opacity: 1 }, s);
  tl.fromTo("#b" + i, { scale: 0.72 }, { scale: 1, duration: 0.3, ease: "back.out(2.6)", immediateRender: false }, s);
  if (i > 0) { tl.set("#p" + (i - 1), { opacity: 0 }, s); tl.set("#b" + (i - 1), { opacity: 0 }, s); }
});
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „Schritt-Tracker: Puls, Haken, Schienenfüllung“ — Bei 0:05 im Video

Daten

Schritt-Tracker: Puls, Haken, Schienenfüllung

Eine Reihe von Schritt-Kreisen auf einer Schiene. Der Kreis des aktuellen Schritts atmet alle 1.03 s von 1 auf 1.12 und zurück (sine.inOut-Hälften von 0.515 s), sein Punkt und sein Label in der Akzentfarbe. Ist der Schritt erledigt, füllt sich der Kreis pink, ein weißer Haken zeichnet sich in 0.17 s, das Label wird dunkel, und 0.03 s später füllt sich die Schiene zum nächsten Kreis in 0.37 s (power1.inOut), während der nächste Kreis zu atmen beginnt.

Wann einsetzen Um den Fortschritt durch eine Schrittfolge in jeder Erklärung oder Anleitung zu zeigen.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schritt-Tracker: Puls, Haken, Schienenfüllung</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
@import url("https://fonts.googleapis.com/css2?family=Lalezar&family=Playpen+Sans:wght@400&display=swap");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.rail { stroke: rgba(107, 99, 133, 0.3); stroke-width: 3; stroke-linecap: round; }
.railOn { stroke: #FB2D89; stroke-width: 3.4; stroke-linecap: round; }
.ring { fill: #FFFFFF; stroke: rgba(107, 99, 133, 0.3); stroke-width: 2.6; }
.dot { fill: rgba(107, 99, 133, 0.62); }
.done { fill: #FB2D89; stroke: #1C0B5D; stroke-width: 2.8; opacity: 0; }
.check { fill: none; stroke: #FFFFFF; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
#labels { position: absolute; inset: 0; }
.lbl { position: absolute; top: 580px; width: 200px; margin-left: -100px; text-align: center; font: 18px/1.2 "Playpen Sans", sans-serif; color: rgba(107, 99, 133, 0.62); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="5" viewBox="0 0 1080 1080" id="tracker"></svg>
  <div id="labels" class="clip" data-start="0" data-duration="5"></div>
</div>
<script>
const LABELS = ["FIRST", "SECOND", "THIRD", "FOURTH"];
const X = LABELS.map((_, i) => 306 + i * 156), Y = 540, R = 21.5;
const STARTS = [0.4, 1.6, 2.8, 4.0], DONE = [1.5, 2.7, 3.9];   // each step starts, and ends (s)
const NS = "http://www.w3.org/2000/svg", svg = document.getElementById("tracker");
const el = (tag, a, p) => { const e = document.createElementNS(NS, tag); for (const k in a) e.setAttribute(k, a[k]); p.appendChild(e); return e; };
for (let i = 0; i < X.length - 1; i++) {
  el("line", { class: "rail", x1: X[i] + R + 3.5, y1: Y, x2: X[i + 1] - R - 3.5, y2: Y }, svg);
  const on = el("line", { class: "railOn", id: "on" + i, x1: X[i] + R + 3.5, y1: Y, x2: X[i + 1] - R - 3.5, y2: Y }, svg);
  const len = X[i + 1] - X[i] - 2 * R - 7; on.style.strokeDasharray = len + " " + len; on.style.strokeDashoffset = len; on.dataset.len = len;
}
X.forEach((x, i) => {
  const n = el("g", { transform: "translate(" + x + " " + Y + ")" }, svg), g = el("g", { id: "n" + i }, n);
  el("circle", { class: "ring", r: R, id: "ring" + i }, g);
  el("circle", { class: "done", r: R, id: "done" + i }, g);
  el("circle", { class: "dot", r: 5.5, id: "dot" + i }, g);
  const ck = el("path", { class: "check", id: "ck" + i, d: "M-8.5,0.5 L-2.5,6.5 L8.5,-6" }, g); ck.style.strokeDasharray = "28 28"; ck.style.strokeDashoffset = 28;
  const l = document.createElement("div"); l.className = "lbl"; l.id = "l" + i; l.style.left = x + "px"; l.textContent = LABELS[i]; document.getElementById("labels").appendChild(l);
});
const tl = gsap.timeline({ paused: true });
STARTS.forEach((s, i) => {
  tl.set("#ring" + i, { stroke: "#1C0B5D" }, s);
  tl.set("#dot" + i, { fill: "#FB2D89" }, s);
  tl.set("#l" + i, { color: "#FB2D89" }, s);
  const end = DONE[i] ?? 5, cycles = Math.max(1, Math.floor((end - s) / 1.03));
  tl.fromTo("#n" + i, { scale: 1, svgOrigin: "0 0" }, { scale: 1.12, svgOrigin: "0 0", duration: 0.515, ease: "sine.inOut", yoyo: true, repeat: cycles * 2 - 1, immediateRender: false }, s);
  if (DONE[i] === undefined) return;
  tl.set("#n" + i, { scale: 1 }, end);
  tl.set("#done" + i, { opacity: 1 }, end);
  tl.set("#dot" + i, { opacity: 0 }, end);
  tl.fromTo("#ck" + i, { strokeDashoffset: 28 }, { strokeDashoffset: 0, duration: 0.17, ease: "power1.out", immediateRender: false }, end);
  tl.set("#l" + i, { color: "#1C0B5D" }, end);
  const on = document.getElementById("on" + i);
  tl.fromTo(on, { strokeDashoffset: on.dataset.len }, { strokeDashoffset: 0, duration: 0.37, ease: "power1.inOut", immediateRender: false }, end + 0.03);
});
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „Eingießen, das ein Glas füllt“ — Bei 0:13 im Video

Formen

Eingießen, das ein Glas füllt

Eine Flasche gleitet herein, kippt auf einem kleinen Bogen auf 115 Grad (18 px hoch, dann hinunter zum Gießpunkt, 0.37 s), und ein Strahl zeichnet sich von der Mündung entlang einer quadratischen Kurve zum Getränk in 0.17 s. Der Pegel steigt mit sine.inOut über 2 s, während die Farbe in etwa 1.3 s in die neue übergeht; Spritztropfen hüpfen über der Oberfläche, wo der Strahl auftrifft. Am Ende löst sich das obere Ende des Strahls und fällt in 0.2 s (power2.in), während die Flasche zurückkippt. Alles wird in einem Setter aus der Zeit berechnet, daher lässt sich jeder Frame einzeln rendern.

Wann einsetzen Für Rezepte, Mischen oder Füll-Metaphern: alles, was Schritt für Schritt in einen Behälter gegossen wird.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Eingießen, das ein Glas füllt</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="5" viewBox="0 0 1080 1080"><g transform="translate(188 40)">
    <path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/>
    <path id="liq" stroke-width="2"/><ellipse id="top" stroke-width="2"/>
    <g id="drops"><circle r="3"/><circle r="4.6"/><circle r="3"/><circle r="4.6"/></g>
    <path id="sOut" fill="none" stroke="#1C0B5D" stroke-width="10.5" stroke-linecap="round"/><path id="sIn" fill="none" stroke="#FB2D89" stroke-width="6.4" stroke-linecap="round"/>
    <path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/>
    <g id="bottle"><path d="M-44,-12 Q-44,-27 -32,-34 Q-12,-46 -12,-62 L-12,-121 L12,-121 L12,-62 Q12,-46 32,-34 Q44,-27 44,-12 L44,123 Q44,135 32,135 L-32,135 Q-44,135 -44,123 Z" fill="#FB2D89" stroke="#1C0B5D" stroke-width="3" stroke-linejoin="round"/><rect x="-17.5" y="-135" width="35" height="15" rx="3" fill="#FB2D89" stroke="#1C0B5D" stroke-width="3"/><rect x="-36" y="20" width="73" height="75" rx="6" fill="#FFFFFF" stroke="#1C0B5D" stroke-width="2.6"/></g>
  </g></svg>
</div>
<script>
const FROM = "#FFFFFF", TO = "#FB2D89";   // drink before and after this pour
const LEVEL0 = 750, LEVEL1 = 621;            // surface y before and after
const ease = (n) => gsap.parseEase(n), c01 = (v) => Math.max(0, Math.min(1, v)), lerp = (a, b, p) => a + (b - a) * p;
function kf(track, t) { if (t <= track[0][0]) return track[0][1]; for (let i = 1; i < track.length; i++) { const [t1, v1, e] = track[i]; if (t <= t1) { const [t0, v0] = track[i - 1], p = (t - t0) / (t1 - t0); return v0 + (v1 - v0) * (e ? ease(e)(p) : p); } } return track[track.length - 1][1]; }
const BX = [[0.2, -60], [0.45, 107, "power2.out"], [0.8, 107], [0.97, 112, "power1.inOut"], [1.17, 130, "power2.out"], [3.6, 130], [3.82, 120, "power1.in"], [4.04, 107, "power2.out"]];
const BY = [[0.8, 300], [0.97, 282, "power1.out"], [1.17, 337, "power2.inOut"], [3.6, 337], [3.82, 300, "power1.in"], [4.04, 300, "power2.out"]];
const BR = [[0.8, 0], [0.97, 70, "power1.in"], [1.17, 115.3, "power2.out"], [3.6, 115.3], [3.82, 62, "power1.in"], [4.04, 0, "power2.out"]];
const hex = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16));
const mix = (a, b, p) => "rgb(" + hex(a).map((v, i) => Math.round(lerp(v, hex(b)[i], p))).join(",") + ")";
const inL = (y) => 217 + 25 * (y - 460) / 326, inR = (y) => 487 - 25 * (y - 460) / 326;
const $ = (id) => document.getElementById(id);
function render(t) {
  const level = lerp(LEVEL0, LEVEL1, ease("sine.inOut")(c01((t - 1.37) / 2))), q = ease("sine.inOut")(c01((t - 1.6) / 1.33));
  const col = mix(FROM, TO, q), edge = mix("#9E9E9E", "#1C0B5D", q * 0.6);
  const xl = inL(level), xr = inR(level), on = level < LEVEL0 - 1;
  $("liq").setAttribute("d", on ? "M" + xl + "," + level + " L" + inL(746) + ",746 Q352,764 " + inR(746) + ",746 L" + xr + "," + level + " Z" : "");
  $("liq").setAttribute("fill", col); $("liq").setAttribute("stroke", edge);
  Object.entries({ cx: (xl + xr) / 2, cy: level, rx: on ? (xr - xl) / 2 : 0, ry: Math.min(12.5, (LEVEL0 - level) * 0.5 + 2) }).forEach(([k, v]) => $("top").setAttribute(k, v));
  const c = hex(FROM).map((v, i) => lerp(v, hex(TO)[i], q)), surf = c.map((v) => Math.round(v + (255 - v) * 0.22));   // the surface: the drink, a touch lighter
  $("top").setAttribute("fill", "rgb(" + surf.join(",") + ")"); $("top").setAttribute("stroke", edge);
  const bx = kf(BX, t), by = kf(BY, t), br = kf(BR, t), a = br * Math.PI / 180;
  $("bottle").setAttribute("transform", "translate(" + bx + " " + by + ") rotate(" + br + ")");
  const pouring = t >= 1.17 && t < 3.77, mx = bx + 128.5 * Math.sin(a), my = by - 128.5 * Math.cos(a) + 6, ey = Math.min(level, 752);
  const s1 = c01((t - 1.17) / 0.17), s0 = t > 3.57 ? ease("power2.in")(c01((t - 3.57) / 0.2)) : 0;
  ["sOut", "sIn"].forEach((id) => { const p = $(id); p.setAttribute("d", "M" + mx + "," + my + " Q" + (mx + 47) + "," + (my + 102) + " " + (mx + 66) + "," + ey); const L = p.getTotalLength(); p.style.strokeDasharray = Math.max(0, (s1 - s0) * L) + " " + (L + 10); p.style.strokeDashoffset = -s0 * L; p.style.opacity = pouring ? 1 : 0; });
  [...$("drops").children].forEach((d, i) => { const ph = (t * 2.4 + i * 0.27) % 1; d.setAttribute("cx", mx + 36 + i * 9); d.setAttribute("cy", level - 8 - Math.sin(ph * Math.PI) * 14 - (i % 2) * 5); d.setAttribute("fill", TO); d.setAttribute("stroke", "#1C0B5D"); d.setAttribute("stroke-width", 1.6); d.style.opacity = pouring && on ? 1 : 0; });
}
let now = 0; const driver = {}; Object.defineProperty(driver, "t", { get: () => now, set: (v) => { now = v; render(v); } });
const tl = gsap.timeline({ paused: true });
tl.fromTo(driver, { t: 0 }, { t: 5, duration: 5, ease: "none", immediateRender: true }, 0);
render(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „Fall mit Aufprall und Funken“ — Bei 0:04 im Video

Sonstiges

Fall mit Aufprall und Funken

Objekte fallen von oberhalb des Bildes unter Schwerkraft herein (power2.in, etwa 0.32 s für 760 px), treffen den Boden, springen etwa 140 px zurück nach oben (power2.out, 0.13 s), fallen erneut, machen einen kleinen 20-px-Hüpfer und kommen zur Ruhe, alles mit einer leichten Drehung, die sich zum Ruhewinkel abwickelt. Drei kurze Funkenstriche blitzen 0.3 s über jedem auf, wenn es am Rand vorbeifällt. Jedes Objekt startet 0.35 s nach dem letzten und landet an anderer Stelle, das letzte auf den anderen.

Wann einsetzen Für Dinge, die in einen Behälter oder auf eine Fläche fallen: Eis, Münzen, Blöcke, Artikel im Warenkorb.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fall mit Aufprall und Funken</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
.cube { fill: rgba(255, 255, 255, 0.6); stroke: #1C0B5D; stroke-width: 2.6; }
.spark { fill: none; stroke: #1C0B5D; stroke-width: 2; stroke-linecap: round; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080"><g transform="translate(188 40)"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><g id="items"></g><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g></svg>
</div>
<script>
// Each item: x, rest y, rest angle, start time.
const ITEMS = [[296, 711, 14, 0.2], [402, 704, -15, 0.55], [351, 645, 31, 0.92]];
const NS = "http://www.w3.org/2000/svg", host = document.getElementById("items");
const el = (tag, a, p) => { const e = document.createElementNS(NS, tag); for (const k in a) e.setAttribute(k, a[k]); p.appendChild(e); return e; };
const tl = gsap.timeline({ paused: true });
ITEMS.forEach(([x, rest, ang, t0], i) => {
  const pos = el("g", { id: "pos" + i }, host), rot = el("g", {}, pos);
  el("rect", { class: "cube", x: -35, y: -35, width: 70, height: 70, rx: 13 }, rot);
  const sp = el("g", { opacity: 0 }, pos);
  ["M-44,-34 L-56,-44", "M-12,-52 L-15,-66", "M18,-50 L25,-63"].forEach((d) => el("path", { class: "spark", d }, sp));
  const fall = Math.sqrt((rest + 50) / 760) * 0.32;          // time to fall from y = -50
  gsap.set(pos, { x, y: -50 });
  tl.to(pos, { y: rest, duration: fall, ease: "power2.in" }, t0)
    .to(pos, { y: rest - 140, duration: 0.13, ease: "power2.out" })
    .to(pos, { y: rest, duration: 0.13, ease: "power2.in" })
    .to(pos, { y: rest - 20, duration: 0.06, ease: "power2.out" })
    .to(pos, { y: rest, duration: 0.06, ease: "power2.in" });
  tl.fromTo(rot, { rotation: ang - 40, svgOrigin: "0 0" }, { rotation: ang, svgOrigin: "0 0", duration: fall + 0.38, ease: "power1.out", immediateRender: true }, t0);
  const enter = t0 + fall * Math.sqrt((470 + 50) / (rest + 50));   // when it passes the rim (y 470)
  tl.set(sp, { opacity: 1 }, enter).to(sp, { opacity: 0, duration: 0.1 }, enter + 0.2);
});
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „Finaler Strichburst, der atmet“ — Bei 0:27 im Video

Partikel

Finaler Strichburst, der atmet

Wenn das Stück komplett ist, schießen sieben kurze Striche in zwei Akzentfarben auf Strahlen um das Hauptobjekt (Innenradius etwa 180-200 px, 26 px lang) in 0.16 s mit power2.out heraus, einige um bis zu 0.1 s versetzt, und atmen dann in 1.3-s-Sinuszyklen mit unterschiedlichen Phasen um 7 px ein und aus. Gleichzeitig wächst das Objekt in 0.6 s um 4.2% (sine.inOut) und bleibt so.

Wann einsetzen Für einen ruhigen Fertig- oder Tada-Moment am Ende eines Aufbaus, ohne Konfetti.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Finaler Strichburst, der atmet</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
#root { position: relative; overflow: hidden; transform-origin: 0 0; }
</style>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1080px; height: 1080px; overflow: hidden; background: #FAF9FF; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #FAF9FF; }
.art { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.ink { fill: none; stroke: #1C0B5D; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fill { fill: #F0EDFF; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
  <svg class="art clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080"><g transform="translate(188 -70)"><g id="hero"><path class="fill" d="M209,460 L234,786 Q352,808 470,786 L495,460 Z"/><ellipse class="fill" cx="352" cy="457.5" rx="143" ry="22"/><path class="ink" d="M209,461 L234,786"/><path class="ink" d="M495,461 L470,786"/><path class="ink" d="M209,457.5 A143,22 0 1 1 495,457.5 A143,22 0 1 1 209,457.5"/><path class="ink" d="M234,786 Q352,808 470,786"/></g><g id="bursts"></g></g></svg>
</div>
<script>
const CX = 352, CY = 610, START = 0.5;
// angle (deg), radius, colour, delay
const RAYS = [[-104.8, 212, "#FE9117", 0], [-142.4, 228, "#FB2D89", 0.1], [181, 230, "#FE9117", 0], [164, 212, "#FB2D89", 0.03], [-65, 209, "#FB2D89", 0.06], [-27, 215, "#FE9117", 0], [8.3, 222, "#FB2D89", 0.04]];
const PHASE = [0, 2.2, 4.1, 1.3, 3.3, 5.2, 0.7];
const NS = "http://www.w3.org/2000/svg", host = document.getElementById("bursts");
const lines = RAYS.map(([, , c]) => { const l = document.createElementNS(NS, "line"); l.setAttribute("stroke", c); l.setAttribute("stroke-width", 4); l.setAttribute("stroke-linecap", "round"); host.appendChild(l); return l; });
const ease = (n) => gsap.parseEase(n), c01 = (v) => Math.max(0, Math.min(1, v));
function render(t) {
  RAYS.forEach(([a, r, , d], i) => {
    const t0 = START + d, l = lines[i];
    if (t < t0) { l.style.opacity = 0; return; }
    const p = ease("power2.out")(c01((t - t0) / 0.16));
    const wob = 7 * Math.sin(2 * Math.PI * Math.max(0, t - t0 - 0.16) / 1.3 + PHASE[i]) * c01((t - t0 - 0.16) / 0.3);
    const rad = a * Math.PI / 180, r0 = r - 34 + 18 * p + wob, r1 = r0 + 26 * p;
    l.setAttribute("x1", CX + r0 * Math.cos(rad)); l.setAttribute("y1", CY + r0 * Math.sin(rad));
    l.setAttribute("x2", CX + r1 * Math.cos(rad)); l.setAttribute("y2", CY + r1 * Math.sin(rad));
    l.style.opacity = 1;
  });
}
let now = 0; const driver = {}; Object.defineProperty(driver, "t", { get: () => now, set: (v) => { now = v; render(v); } });
const tl = gsap.timeline({ paused: true });
tl.fromTo(driver, { t: 0 }, { t: 4, duration: 4, ease: "none", immediateRender: true }, 0);
tl.fromTo("#hero", { scale: 1, svgOrigin: "352 623" }, { scale: 1.042, svgOrigin: "352 623", duration: 0.6, ease: "sine.inOut", immediateRender: false }, START + 0.36);
render(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Weitere Prompts

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

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>

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

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 „Landingpage-Promo mit objektgesteuerten Übergängen“

Landingpage-Promo mit objektgesteuerten Übergängen

<direction> Erstelle ein 15-sekündiges horizontales Motion-Graphics-Promo im Format 1920x1080 für [your brand], aufgebaut wie eine Landingpage, die zum Leben erwacht. Schneide es auf einen elektronischen Track mit 128 BPM ohne Sprecher. Die Idee: Es gibt nie einen einfachen Schnitt, jede Szene übergibt über ein Objekt (einen Punkt, eine Walzenauswahl, ein Handy, eine Gewinner-Kachel) an die nächste. Halte einen sauberen, hellen Produkt-UI-Look: helle Hintergründe, abgerundete Pills, Karten, ein Handy, ein Dashboard und eine Videowand, alle Beschriftungen als dunkler Text auf weißen Platten, und meine Markenfarben nach Rolle eingesetzt. Vermeide harte Schnitte, Überblendungen, Sprecher, weißen Text auf hellen oder gestreiften Hintergründen und Beschriftungen, die Ringe oder benachbarte Formen überlappen. </direction> <structure> Fünf Beats von etwa gleicher Länge, je etwa 3 Sekunden, jede Übergabe landet auf dem Beat. 1. Eröffnung: Ein einzelner Punkt erscheint in der Mitte und wächst zu einer horizontalen Pill mit einer Reihe von Kreisen: kleine Porträts und Icons wie "Aa", einfache Formen und ein Würfel. Jedes Icon ist vollständig sichtbar und nicht vom benachbarten Kreis verdeckt. Die Kamera zieht zurück und enthüllt eine zweizeilige Schlagzeile, beide Zeilen zentriert. Die erste Zeile lautet etwa "No … keyframes." (durch deine ersetzen). Das letzte Wort der Schlagzeile rollt weiter durch Alternativen wie eine Slot-Walze. 2. Ein Zoom taucht hindurch in eine rotierende Walze aus Creator-Porträts und Karten. Die Walze wird langsamer und bleibt bei einer Auswahl stehen, die hervorgehoben wird. 3. Die Auswahl wird zu einem Handy, und ein Fächer aus Feature-Karten breitet sich um es herum aus. Eine Karte zeigt "Edit in words" mit der großen Zahl "03" und einem kleinen "Live preview"-Tag direkt neben der Zahl (durch deine Features ersetzen). Die Kartenbeschriftungen liegen auf weißen Platten. 4. Ein Wischschwenk führt zu einem Dashboard aus Video-Kacheln mit Beschriftungen auf weißen Platten. Es bewertet sie und wählt ein Gewinnervideo aus, das hervorgehoben wird. 5. Die Gewinner-Kachel öffnet sich zu einer geneigten Videowand mit Beschriftungen auf weißen Platten. Die Wand faltet sich dann zu meinem Logo für die Endkarte, mit "[your website]" neben dem Logo auf einer weißen Platte. </structure> <composition> Zentrierte, symmetrische Bildgestaltung für die Schlagzeile und die Logo-Endkarte. UI-Elemente sind wie auf einer echten Landingpage angeordnet: eine Pill-Reihe, Karten mit großen Zahlen und kleinen Tags, ein Handy-Mockup, ein Dashboard-Raster und eine perspektivisch geneigte Wand. Verwende meine Markenfarben nach Rolle: Hintergrundtöne (hell, mit einigen gestreiften Flächen), eine Akzentfarbe für Hervorhebungen, Auswahlen und Ringe und eine dunkle Textfarbe. Jede Beschriftung auf Karten, Kacheln und der Wand ist dunkler Text auf einer weißen, abgerundeten Platte, damit sie auf jedem Hintergrund lesbar ist. Verwende eine saubere Sans-Serif-Familie: eine fette Schlagzeile, Beschriftungen in normaler Stärke und fette Button-Beschriftungen. Lasse großzügige Abstände, damit kein Text Ringe oder Ränder berührt. </composition> <techniques> Jeder Übergang ist ein Objekt, das sich in die nächste Szene verwandelt, nie ein Schnitt. Der Punkt skaliert mit sanftem Ease-out zur Pill, und die Kreise poppen leicht versetzt auf. Der Kamerarückzug ist eine sanfte Verkleinerung, die die Schlagzeile enthüllt. Das rollende Wort ist eine vertikale Slot-Rolle, die Wörter in einer Schleife durchläuft. Der Zoom geht durch die Pill in die Walze. Die Walze dreht schnell und bremst mit langem Ease-out ab, um präzise auf der Auswahl zu landen. Die Auswahl skaliert und formt sich zum Handy um, und die Karten fächern sich mit gestaffelter Drehung und Verschiebung um es herum auf. Der Wischschwenk ist eine schnelle horizontale Bewegung mit Bewegungsunschärfe und scharfem In-out-Ease. Die Dashboard-Auswahl ist ein Hervorhebungsring mit Skalierung des Gewinners. Der Gewinner dehnt sich zur geneigten 3D-Wand aus, die sich faltet und mit einem finalen Einrasten zum Logo zusammenfällt. Alle wichtigen Bewegungen und Landungen treffen das Beat-Raster. </techniques> <music> Komponiere einen originalen, mitreißenden elektronischen Track mit 128 BPM, genau 15 Sekunden lang, mit klarem Spannungsbogen: leichter Start, Aufbau durch die Walzen- und Handy-Szenen, ein Drop um den Wischschwenk und ein sauberes Ende auf dem Logo. Lege ihn auf das Beat-Raster des Schnitts, mit darüber komponierten Hits für jede Übergabe, einem Riser in den Drop und einem finalen Hit, wenn die Wand sich zum Logo faltet. Master auf etwa -14 LUFS mit True Peak unter -1 dBTP. </music> <sound> Kein Sprecher. Füge Whooshes beim Durchzoomen und beim Wischschwenk hinzu, ein kurzes Ticken-und-Stopp, wenn die Walze landet, und einen sanften Impact auf dem Logo. Halte alle unter der Musik und auf dem Beat. </sound> <references> Eine SaaS-Landingpage, animiert zu einem Produkt-Promo: UI-Karten, Handy-Mockup, Analytics-Dashboard und Videowand, im Stil moderner App-Launch-Videos mit nahtlosen Objekt-zu-Objekt-Übergängen. </references>

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