Simple MotionPrompt-Code: NPXProdukt-Reel „Lebendes Exemplar“ mit Logo-Morph
placeholder
Einmal verwendetEin quadratischer, 20 Sekunden langer Kinetic-Type-Loop, in dem schwere Wörter zu Sturz, hängender Last und Stützen werden und mit einer Markenaussage enden.
Prompt-Code UKEVeröffentlicht Einmal verwendet
Prompt verwendenDer Prompt öffnet sich in der App: Füg dein eigenes Material hinzu und der Agent baut das Video.
Prompt meldenErstelle einen quadratischen kinetischen Typografiefilm von 20 Sekunden, 1080x1080 bei 60 fps, mit Musik und Sounddesign. Eine kurze Produktbotschaft baut aus ihren eigenen Wörtern ein Bauwerk: Ein schweres Wort drückt wie ein Sturz nach unten, ein anderes hängt an Seilen und biegt die Linie, an der es hängt, zwei Wörter schwingen aufrecht zu Stützen, die Kamera taucht durch die Punze eines Buchstabens, und die Schlussaussage setzt sich auf einer Plattform zusammen. Der Film muss nahtlos loopen: Das letzte Bild ist exakt das erste. Alles ist gezeichnet: flache Schrift, Linien und Striche auf einem flachen, tiefen Tintenfeld. Vermeide Footage, Fotos, Textur, Korn, Farbkorrekturen und Verläufe. Schwere Lasten federn nie; nur die Linie ist elastisch. Die Bewegung folgt der Phrasierung der Botschaft, nicht einem Tanzbeat. Alle Wörter auf dem Bildschirm sind Beispiele, die du durch deine eigene Botschaft ersetzt, gewählt nach Rolle und Länge jedes Slots, damit das Layout hält.
Cue 1, 0–3,3 s, der Sturz: Ein riesiges, schweres Wort, 320 px, spannt sich oben über das Bild (Beispiel „JAGD“), seine Grundlinie bei y 524. Darunter liegt die Linie, ganz leicht geneigt (y 712 links, y 697 rechts). Der Satz steigt in zwei Gruppen bei 0,33 s und 1,03 s aus der Linie, 58 px Playfair, Grundlinie 17 px über der Linie (Beispiel „Keine Keyframes“ / „zum Jagen.“). Er lebt in der Öffnung zwischen der über das Bild verlängerten Grundlinie des großen Wortes und der Linie. Von 0 bis 2,9 s sinkt das große Wort um 104 px und neigt sich von -0,15 auf -1,9 Grad um seine linke Grundlinie (power2.inOut), sodass sich die Öffnung verengt. Bei 2,93 s fällt es mit einem kritisch gedämpften Ausschwingen (Omega etwa 14 pro Sekunde) auf die Linie und richtet sich nach deren Winkel aus. Der Satz wird von oben durch seine Grundlinie abgeschnitten und verschwindet.
Cue 1 zu 2, 3,28–4,03 s: Die Linie senkt sich unter der Landung um 5 px. Dann fliegt das große Wort gerade nach oben aus dem Bild (power2.inOut, 0,7 s, etwa 700 px), während die Linie samt allem darauf um 230 px nach oben gleitet (power2.inOut, 0,75 s).
Cue 2, 3,5–6,5 s, die hängende Last: Ein zweiter Satz steigt bei 3,58 s und 4,18 s aus der Linie (Beispiel „Chat statt“ / „einer“). Bei 4,49 s fallen zwei feine Linien (1 px, helles Seitenweiß bei 45 %) bei x 468 und x 627 von der Linie herab (power2.inOut, 0,34 s). Bei 4,79 s fällt ein schweres 138-px-Wort (Beispiel „TIMELINE“) hinter der Linie hervor, auf den Bereich unter ihr beschnitten. Es fällt mit kritisch gedämpfter Bewegung aus 191 px über seinem Ruheplatz (Omega 8,6 pro Sekunde) und hängt etwa 90 px unter der Linie. Bei 5,43 s gibt die Linie nach: ein Halbsinus-Durchhang zwischen ihren Enden, angetrieben von einer unterdämpften Feder (30 px, Omega 11,9 pro Sekunde, Dämpfungsgrad 0,30). Sie schwingt einmal auf 41 px über, federt ein wenig zurück und ruht bei 30 px. Die Linien werden in 0,12 s zu 2,5 px dicken pinken Seilen, und das Wort sinkt mit dem Durchhang. Jedes Wort des Satzes reitet auf der Kurve, gedreht zur lokalen Steigung.
Cue 3, 6,43–9,47 s, die erste Stütze: Die Kamera zieht auf 76 % um einen Punkt weit rechts vom Bild zurück (power2.inOut, 0,65 s), sodass Linie und hängendes Wort nach rechts rücken und der Satz in die Linie sinkt. Bei 6,96 s steigt oben links eine Phrase auf, 49 px auf dem Bildschirm (Beispiel „Beschreibe das“). Bei 7,09 s steigt ein schweres Wort von unterhalb des Bildes auf und legt sich neben das freie linke Ende der Linie (kritisch gedämpft, 0,6 s). Seine Länge entspricht etwa der Höhe des freien Linienendes (Beispiel „VIDEO“). Bei 7,95 s schwingt es um 90 Grad gegen den Uhrzeigersinn um sein fernes Ende (etwa 0,8 s) und steht aufrecht unter der Linie, von unten nach oben zu lesen. Beim Aufrichten hebt es das linke Ende der Linie um 61 px (power4.out, 0,53 s), und das hängende Wort neigt sich auf +2,7 Grad. Bei 8,83 s steigt unter dem hängenden Wort eine kleine Phrase auf (Beispiel „Ideen in“). Bei 9,02 s steigt ein großes Playfair-Wort auf (152 px auf dem Bildschirm, 0,56 s), dessen zweiter Buchstabe ein O ist (Beispiel „MOTION“). In der Punze des O ist die nächste Szene bereits in etwa 5 % ihrer Größe gezeichnet: die Linie, die Stütze und das hängende Wort in ihrem nächsten Layout.
Cue 3 zu 4, 9,47–10,02 s, durch das O: Die Kamera zoomt in die Punze des O. Der natürliche Logarithmus des Maßstabs wächst mit dem Quadrat der Zeit (etwa x18 bis 10,0 s), während der Mittelpunkt der Punze zur Bildmitte gleitet (power2.inOut). Die kleine Szene fährt den Zoom mit, wächst dann darüber hinaus und landet bei 9,93 s exakt im Vollbild, während der Ring des O über die Ränder hinausfegt.
Cue 4, 10–12,5 s, die Waage: Oben links steigt bei 10,22 s und 10,52 s eine Phrase auf, 64 px (Beispiel „Bearbeite in“ / „Worten.“). Bei 10,49 s steigt am rechten Rand von unten eine zweite aufrechte Stütze (dasselbe Wort) an ihren Platz unter dem tiefen rechten Ende der Linie (kritisch gedämpft, 0,89 s). Von 11,08 bis 11,43 s richtet sich die Linie perfekt waagerecht aus und verliert ihren Durchhang (power1.out), und das hängende Wort richtet sich mit ihr aus. Das ist der erste perfekt waagerechte Moment des Films. Von 11,4 bis 11,6 s zeichnet sich eine 1-px-Bodenlinie (#E9E4F2 bei 18 %) von der Mitte aus bei y 965 (power2.in). Dann Stille.
Cue 5, 12,5–16 s, die Plattform: Die Phrase aus Cue 4 sinkt. Bei 12,53 s steigt das hängende Wort und setzt sich knapp unter die Linie (kritisch gedämpft, 0,7 s), und die Seile verkürzen sich mit. Bei 12,93 s steigt eine Serifenphrase (54 px, Beispiel „Deine Idee ist bereit,“) und wartet etwa 58 px über der Zeile, dann setzt sie sich bei 13,83 s darauf (kritisch gedämpft, 0,5 s). Bei 13,33 s steigt das erste schwere Plattformwort aus der Linie (117 px, 0,56 s, Beispiel „LOSZULEGEN.“). Bei 14,17 s steigt ein kurzes Serifenwort und wartet über der Linie, dann setzt es sich bei 14,59 s auf die Linie (das erste Wort von [your brand]). Bei 14,87 s steigt das letzte schwere Wort aus der Linie und landet als letztes (119 px, 0,58 s; das letzte Wort von [your brand], mit Punkt).
Cue 6, 16–18 s: Halte die vollständige Aussage; nichts bewegt sich.
Cue 7, 18–20 s, der Loop: Bei 18,0 s taucht die Kamera unter die Plattform, am Fuß des Stamms eines Buchstabens des hängenden Wortes (ein E oder ein I). Der Logarithmus des Maßstabs beschleunigt (etwa x40 bis 19 s), während der Fuß des Stamms nach unten aus dem Bild getragen wird, bis die helle Farbe des Stamms das Bild füllt. Bei 19,05 s wechselst du unter dieser vollständigen Verdeckung zum Anfangsbild von Cue 1, von innen in einem Stamm des großen Wortes gesehen: das große Wort an seiner Startposition, die Linie, kein Satz. Die Zeitmarken zeigen wieder den ersten Cue. Zieh mit abbremsendem Log-Maßstab heraus (etwa x22 auf x1 bis 20,0 s), damit das letzte Bild exakt das erste ist.
Tempo: etwa ein neues Element alle 0,5–0,7 s innerhalb eines Cues, ein langes, langsames Drücken in Cue 1, eine kurze Stille nach dem Ausrichten der Linie und zwei Sekunden Halt vor dem Loop.
Feld: tiefe Tinte #1C0B5D, flach. Alle Schrift in hellem Seitenweiß #FAF9FF. Ein struktureller Akzent, Pink #FB2D89, nur für die Hauptlinie, die Seile und die Cue-Marke.
Schwere Wörter: Pliant 900 bei Breite 105 (eine breite, sehr fette Grotesk), enge Laufweite. Phrasen: Playfair Display 400. Zeitmarken: JetBrains Mono 13 px in Lavendel #F0EDFF bei 47 % Deckkraft.
Ränder von 60 px. Die Hauptlinie ist ein 4-px-Strich in Pink von x 60 bis x 1020.
Zeitmarken auf jedem Bild, oben:
oben links: deine Webadresse in Großbuchstaben (Beispiel „YOURSITE.COM“);
oben rechts: die Spanne des aktuellen Cues, geschrieben wie „06.50 — 10.00“;
darunter: eine 1-px-Linie (#E9E4F2 bei 18 %) von x 60 bis x 1020, mit einem 3-px-Teilstrich jede Sekunde und einem 6-px-Teilstrich alle fünf Sekunden;
auf dieser Linie: ein 3-px-Balken in Pink, der exakt die Spanne des aktuellen Cues abdeckt.
Der Balken und die Zeiten springen auf dem ersten Bild zum nächsten Cue. Es gibt sieben Cues: 0–3, 3–6,5, 6,5–10, 10–12,5, 12,5–16, 16–18 und 18–20 s.
Jede Phrase wird enthüllt, indem sie aus einer Linie aufsteigt. Sie ist auf den Bereich über der Linie (oder über einer unsichtbaren Linie etwa 17 px unter ihrer Grundlinie) beschnitten und beginnt 1,28 Schriftgrößen tiefer, vollständig verborgen. Sie landet auf einer kritisch gedämpften Kurve, 1 - (1 + 6p)e^(-6p), normiert, um in 0,5 s 1 zu erreichen: schneller Start, langes weiches Landen, kein Überschwingen.
Phrasen eines Satzes kommen in Sprechgruppen im Abstand von 0,6–0,7 s.
Schwere Lasten setzen sich mit echter kritisch gedämpfter Bewegung und ohne Nachfedern. Nur die Linie ist elastisch: eine unterdämpfte Feder, wenn sie nachgibt.
Wörter auf der gebogenen Linie drehen sich zur lokalen Steigung.
Wenn ein Cue endet, sinkt sein Satz zurück in seine Linie (power2.in, etwa 0,26 s).
Die Kamera ist Maßstab und Position der gesamten Szene:
ein Zurückziehen auf 76 % um einen Punkt weit rechts vom Bild;
ein Zoom durch die Punze eines Buchstabens, bei dem der natürliche Logarithmus des Maßstabs mit dem Quadrat der Zeit wächst und das nächste Layout in der Punze vorgezeichnet ist;
ein Tauchgang in den Stamm eines Buchstabens, der in vollständiger Verdeckung endet und den Schnitt zurück zum Anfangsbild verbirgt.
Ein minimalistisches, filmisches elektronisches Bett mit 120 BPM, genau 10 Takte, sodass jede Cue-Grenze auf einen Beat fällt (3, 6,5, 10, 12,5, 16 und 18 s). Es hat einen tiefen pulsierenden Synthbass, weiche Pads, ein sparsames gezupftes Motiv und leichte tickende Percussion. Der Bogen:
0–3 s: tief und schwer, mit einem Akzent bei 3 s;
ab 3 s: ein Aufschwung;
bis 10 s: ein Filteraufbau zu einem starken Downbeat exakt bei 10 s, dem Moment der Zoomlandung;
ab 11,5 s: offen und fast still;
bis 15,5 s: ein selbstbewusster Aufbau zur vollen Aussage;
16–18 s: ein gehaltener Akkord;
18–20 s: ein Anschwellen mit Höhepunkt bei 19 s, das bis 20 s auf die Anfangstextur zurückfällt, sodass der Loop unhörbar ist.
Kein Gesang.
Soundeffekte nur über dem Bett, ohne eigene Drums oder Bass:
ein weiches Holztick auf dem ersten sichtbaren Bild jeder Phrase;
ein tiefer Boom mit einem schweren Holzklopfen, wenn der Sturz landet (3,1 s), und ein Luftwhoosh, wenn er davonfliegt;
zwei winzige Ticks, wenn die feinen Linien fallen;
ein fallendes Whoosh, dann ein Brettknarren mit einem kurzen Sub-Drop, wenn die Linie nachgibt;
ein weiches Swoosh unter dem Zurückziehen der Kamera;
Whooshes, wenn die Stütze steigt und schwingt, mit einem Klopfen, wenn sie die Linie hebt;
ein Riser in einen glockenartigen Schlag, wenn der Zoom durch das O bei 10 s landet;
ein leichter Metallklick, wenn die Linie waagerecht einrastet, und ein weiches Rauschen, wenn sich die Bodenlinie zeichnet;
Holzklopfen, wenn die Plattformwörter landen, und weiche Taps, wenn sich die Phrasen setzen;
ein tieferer Boom mit einem Holzschlag und einer leisen Glocke unter dem letzten Wort;
ein Riser in das Weiß des Tauchgangs, ein umgekehrtes Swoosh beim verborgenen Schnitt und ein Whoosh beim Herausziehen.
Kein Voice-over. Mische auf etwa -14 LUFS mit True Peak unter -1 dBTP.
Redaktionelle kinetische Typografie im Schweizer Stil, in der Wörter Gewicht haben und als Architektur wirken (Stürze, Seile, Säulen, eine Plattform). Physikalisch simulierte Schrift mit kritisch gedämpften Ausschwingen und einer federnden Linie. Typografische Endlos-Zoom-Loops, die durch Punzen und Stämme von Buchstaben reisen.
Die Motion-Design-Kniffe, aus denen das Video besteht, jeweils mit eigenständigem Code, den du im Browser öffnen oder deinem Agenten geben kannst.
Jede Phrase eines Serifensatzes sitzt über einer 4 px starken Akzentlinie und wird auf den Bereich über deren Oberkante beschnitten; sie startet 1,28 Schriftgrößen tiefer, vollständig verborgen, und steigt auf einer kritisch gedämpften Kurve auf, normiert auf 0,5 s (kein Überschwingen, schneller Start, lange weiche Landung). Die nächste Phrase desselben Satzes beginnt 0,6–0,7 s später, sodass der Satz in gesprochenen Gruppen gelesen wird.
Wann einsetzen Einen Satz phrasenweise enthüllen, als wüchse er aus der Linie, auf der er steht.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Phrasen steigen aus einer Linie 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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="3" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs><clipPath id="above-line"><rect x="0" y="0" width="1080" height="558" /></clipPath></defs>
<g clip-path="url(#above-line)">
<text id="phrase-1" class="serif" x="64" y="541" font-size="58">No keyframes</text>
<text id="phrase-2" class="serif" x="430" y="541" font-size="58">to hunt for.</text>
</g>
<rect x="60" y="558" width="960" height="4" fill="#FB2D89" />
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Critically damped arrival (k = 6: no overshoot), normalised to land exactly at the end of its tween.
const K = 6, arrive = (p) => (1 - (1 + K * p) * Math.exp(-K * p)) / (1 - (1 + K) * Math.exp(-K));
const SIZE = 58; // font size of the phrases, px
const RISE = 1.28 * SIZE; // travel: the phrase starts fully hidden under the rule
const DUR = 0.5; // seconds to land
tl.fromTo("#phrase-1", { y: RISE }, { y: 0, duration: DUR, ease: arrive }, 0.35);
tl.fromTo("#phrase-2", { y: RISE }, { y: 0, duration: DUR, ease: arrive }, 1.05); // the next spoken group 0.7 s later
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>
Ein riesiges, schweres Wort hängt wie ein Sturz über einem Serifensatz, der auf einer Akzentlinie steht; der Satz wird auf das Band zwischen der Grundlinie des Wortes (über den ganzen Bildausschnitt verlängert) und der Linie beschnitten. Das Wort sinkt um 104 px und kippt dabei von -0,15 auf -1,9 Grad um seine linke Grundlinie (power2.inOut über 2,9 s), das Band wird schmaler; dann fällt es mit einer kritisch gedämpften Setzbewegung (omega 14,4 pro Sekunde) auf die Linie, gleicht deren Winkel an und schließt das Band, und nach 0,35 s Ruhe hebt es ab und verlässt das Bild (power2.inOut 0,7 s).
Wann einsetzen Wenn ein Wort die Zeile unter sich physisch quetschen, zerdrücken oder schließen soll.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Schweres Wort drückt eine Textöffnung zu</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4.2" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="4.2" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs><clipPath id="opening"><path id="opening-shape" d="M0 0Z" /></clipPath></defs>
<g clip-path="url(#opening)"><text class="serif" x="64" y="683" font-size="58">No keyframes to hunt for.</text></g>
<rect x="60" y="700" width="960" height="4" fill="#FB2D89" />
<text id="lintel" class="heavy" x="0" y="0" font-size="320" letter-spacing="-5">HUNT</text>
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const X0 = 43; // the lintel's left baseline, the pivot of its tilt
const FLOOR = 700; // top edge of the rule
const S = { y: 524, r: -0.15 }; // lintel baseline y and tilt, degrees
function draw() {
document.getElementById("lintel").setAttribute("transform", `translate(${X0} ${S.y}) rotate(${S.r})`);
// the opening: between the lintel's underside (its baseline, extended) and the rule
const k = Math.tan((S.r * Math.PI) / 180), top = (x) => Math.min(S.y + k * (x - X0), FLOOR);
document.getElementById("opening-shape").setAttribute("d", `M-40 ${top(-40)}L1120 ${top(1120)}L1120 ${FLOOR}L-40 ${FLOOR}Z`);
}
// a critically damped settle (omega 14.4/s) written as an ease over 0.45 s
const W = 14.4, D = 0.45, settle = (p) => 1 - (1 + W * D * p) * Math.exp(-W * D * p);
tl.fromTo(S, { y: 524, r: -0.15 }, { y: 628, r: -1.9, duration: 2.9, ease: "power2.inOut" }, 0); // the slow press
tl.fromTo(S, { y: 628, r: -1.9 }, { y: FLOOR, r: 0, duration: D, ease: settle }, 2.93); // the drop seals it
tl.to(S, { y: -420, duration: 0.7, ease: "power2.inOut" }, 3.4); // lift off
tl.eventCallback("onUpdate", draw);
draw();
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>
Zwei feine Linien fallen von einer Akzentlinie herab (power2.inOut 0,34 s), dann fällt ein schweres Wort hinter der Linie hervor, auf den Bereich darunter beschnitten, mit kritisch gedämpftem Fall (191 px, omega 8,6 pro Sekunde). Bei der Landung hängt die Linie in einem Halbsinusprofil durch, getrieben von einer unterdämpften Feder (30 px, omega 11,9 pro Sekunde, Dämpfungsgrad 0,30): ein Überschwingen, ein kleiner Rückprall, dann Ruhe. Die Linien werden in diesem Moment zu 2,5 px starken Akzentseilen, das Wort hängt daran und sinkt mit dem Durchhang, und die Serifenwörter auf der Linie reiten die Kurve, jedes zur lokalen Steigung gedreht.
Wann einsetzen Einem Wort sichtbares Gewicht geben: Die Struktur, an der es hängt, gibt nach, wackelt und hält.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hängendes Wort biegt eine elastische Linie</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="4" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs><clipPath id="under-line"><path id="under-shape" d="M0 0Z" /></clipPath></defs>
<g id="words"></g>
<line id="cable-1" /><line id="cable-2" />
<g clip-path="url(#under-line)"><text id="hung" class="heavy" font-size="138" letter-spacing="1.8">TIMELINE</text></g>
<path id="line" fill="none" stroke="#FB2D89" stroke-width="4" />
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const NS = "http://www.w3.org/2000/svg";
const L0 = 482, L1 = 467; // line ends at x 60 and 1020
const T_RULES = 0.2, T_DROP = 0.5, T_SAG = 1.15; // rules drop, word drops, line gives way
const WORDS = [["Chat", 0], ["instead", 137], ["of", 341], ["a", 406]]; // example words and their x offsets
const sagAt = (t) => { if (t < T_SAG) return 0; const z = 0.3, w = 11.9, u = t - T_SAG, wd = w * Math.sqrt(1 - z * z);
return 30 * (1 - Math.exp(-z * w * u) * (Math.cos(wd * u) + (z / Math.sqrt(1 - z * z)) * Math.sin(wd * u))); };
const lineY = (x, A) => { const u = Math.min(1, Math.max(0, (x - 60) / 960)); return L0 + (L1 - L0) * u + A * Math.sin(Math.PI * u); };
const words = WORDS.map(([w]) => { const t = document.createElementNS(NS, "text"); t.setAttribute("class", "serif"); t.setAttribute("font-size", 58); t.textContent = w; document.getElementById("words").appendChild(t); return t; });
const p2 = gsap.parseEase("power2.inOut");
function draw(t) {
const A = sagAt(t);
let d = ""; for (let x = 60; x <= 1020; x += 16) d += (d ? "L" : "M") + x + " " + lineY(x, A).toFixed(2);
document.getElementById("line").setAttribute("d", d);
document.getElementById("under-shape").setAttribute("d", "M-40 1200L1120 1200" + [1120, 560, -40].map((x) => "L" + x + " " + (lineY(x, A) + 2).toFixed(2)).join("") + "Z");
WORDS.forEach(([w, ox], i) => { const x = 64 + ox + 30, slope = (lineY(x + 1, A) - lineY(x - 1, A)) / 2;
words[i].setAttribute("transform", `translate(${x} ${(lineY(x, A) - 17).toFixed(2)}) rotate(${(Math.atan(slope) * 180 / Math.PI).toFixed(3)}) translate(-30 0)`); });
const u = t - T_DROP, fall = u <= 0 ? -191 : -191 * (1 + 8.6 * u) * Math.exp(-8.6 * u);
const hy = 662 + 0.89 * A + fall;
document.getElementById("hung").setAttribute("transform", `translate(179 ${hy.toFixed(2)}) rotate(-0.87)`);
const drop = p2(Math.min(1, Math.max(0, (t - T_RULES) / 0.34))), hot = Math.min(1, Math.max(0, (t - T_SAG) / 0.12));
[["cable-1", 468], ["cable-2", 627]].forEach(([id, x]) => { const el = document.getElementById(id), top = lineY(x, A), bottom = 662 + 0.89 * A - 4 - (x - 179) * 0.0152;
el.setAttribute("x1", x); el.setAttribute("x2", x); el.setAttribute("y1", top); el.setAttribute("y2", top + (bottom - top) * drop);
el.setAttribute("stroke", hot > 0 ? "#FB2D89" : "#FAF9FF"); el.setAttribute("stroke-opacity", drop > 0 ? 0.45 + 0.55 * hot : 0); el.setAttribute("stroke-width", 1 + 1.5 * hot); });
}
const clock = { t: 0 };
tl.to(clock, { t: 4, duration: 4, ease: "none", onUpdate: () => draw(clock.t) }, 0);
draw(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>
Ein schweres Wort steigt unter dem Bildrand an seinen Platz neben dem freien Ende einer durchhängenden Akzentlinie (kritisch gedämpft, 0,6 s), ruht, und schwenkt dann um 90 Grad gegen den Uhrzeigersinn um sein fernes Ende (power2.inOut 0,8 s), sodass es aufrecht steht, von unten nach oben zu lesen, als Pfosten unter der Linie. Beim Aufrichten wird das Linienende auf das Wort gehoben (power4.out 0,53 s), und die Linie behält ihren Durchhang.
Wann einsetzen Ein Wort zu Architektur machen: eine Stütze, eine Säule oder ein Hebel, der etwas anhebt.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wort schwingt aufrecht in eine Stütze</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.4" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="3.4" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<path id="line" fill="none" stroke="#FB2D89" stroke-width="4" />
<text id="support" class="heavy" x="0" y="0" font-size="141.5" letter-spacing="4">VIDEO</text>
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Critically damped arrival (k = 6: no overshoot), normalised to land exactly at the end of its tween.
const K = 6, arrive = (p) => (1 - (1 + K * p) * Math.exp(-K * p)) / (1 - (1 + K) * Math.exp(-K));
const LEN = 514; // advance of the word, px
const PX = 466, PY = 440; // its far end: the pivot of the swing, at the line's free end
const L = { yL: 482, yR: 470, A: 30 }; // line ends (x 466 and 1080) and sag
function draw() {
let d = ""; for (let x = PX; x <= 1080; x += 16) { const u = (x - PX) / (1080 - PX); d += (d ? "L" : "M") + x + " " + (L.yL + (L.yR - L.yL) * u + L.A * Math.sin(Math.PI * u)).toFixed(2); }
document.getElementById("line").setAttribute("d", d);
}
gsap.set("#support", { x: PX - LEN, y: PY });
tl.fromTo("#support", { y: PY + 700 }, { y: PY, duration: 0.6, ease: arrive }, 0.1); // rises into place
tl.to("#support", { rotation: -90, svgOrigin: `${PX} ${PY}`, duration: 0.8, ease: "power2.inOut" }, 1.2); // swings upright
tl.fromTo(L, { yL: 482 }, { yL: PY - 18, duration: 0.53, ease: "power4.out" }, 1.5); // lifts the line's end
tl.eventCallback("onUpdate", draw);
draw();
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>
Die nächste Szene ist bereits in der Punze eines großen Serifen-O gezeichnet und auf deren Form bei etwa 5 % ihrer Größe beschnitten. Die Kamera zoomt dann auf die Punze zu: Der natürliche Logarithmus des Maßstabs wächst mit dem Quadrat der Zeit (etwa x18 in 0,53 s), während der Mittelpunkt der Punze in die Bildmitte gleitet (power2.inOut); die kleine Szene fährt den Zoom mit und überholt ihn in den letzten 0,13 s, um exakt im Vollbild anzukommen, während der Ring des Buchstabens an den Rändern vorbeizieht.
Wann einsetzen Ein Übergang, der durch einen Buchstaben in die nächste Idee eintritt, statt zu ihr zu schneiden.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zoom durch die Punze eines Buchstabens in die nächste Szene</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.4" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="2.4" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs><clipPath id="counter"><ellipse id="counter-shape" /></clipPath></defs>
<g id="outer">
<text class="serif" x="497" y="620" font-size="48.6">Ideas in</text>
<text class="serif" x="492" y="752" font-size="137">M</text>
<text id="ring" class="serif" x="613" y="752" font-size="137">O</text>
<text class="serif" x="717" y="752" font-size="137">TION</text>
</g>
<g clip-path="url(#counter)"><g id="inner">
<path d="M60 455Q540 515 1020 503" fill="none" stroke="#FB2D89" stroke-width="4" />
<text class="heavy" transform="translate(178 669) rotate(2.7)" font-size="138" letter-spacing="1.8">TIMELINE</text>
<text class="heavy" transform="translate(161 973) rotate(-90)" font-size="141.5" letter-spacing="4">VIDEO</text>
</g></g>
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const T0 = 0.6, T1 = T0 + 0.53; // zoom start and end, s
let C0 = [0, 0], R = [1, 1];
function measure() { // the counter: the middle of the O's box, about 0.36 x 0.43 of its size
const b = document.getElementById("ring").getBBox();
C0 = [b.x + b.width / 2, b.y + b.height * 0.55]; R = [b.width * 0.36, b.height * 0.43];
}
const p2 = gsap.parseEase("power2.inOut");
function draw(t) {
const u = Math.max(0, (t - T0) / (T1 - T0)), zs = Math.exp(2.9 * Math.min(u, 1.2) ** 2);
const zp = p2(Math.min(1, Math.max(0, (t - T0 + 0.04) / 0.6)));
const c = [C0[0] + (540 - C0[0]) * zp, C0[1] + (548 - C0[1]) * zp];
const cam = `translate(${c[0]} ${c[1]}) scale(${zs}) translate(${-C0[0]} ${-C0[1]})`;
document.getElementById("outer").setAttribute("transform", cam);
const ce = document.getElementById("counter-shape");
ce.setAttribute("cx", C0[0]); ce.setAttribute("cy", C0[1]); ce.setAttribute("rx", R[0]); ce.setAttribute("ry", R[1]); ce.setAttribute("transform", cam);
// the small scene: 5.4 % of the zoom, then it outgrows it and lands at full size
const grow = Math.min(1, Math.max(0, (t - (T1 - 0.2)) / 0.13)), g = Math.exp(Math.log(2) * grow * grow * (3 - 2 * grow));
const s = t >= T1 - 0.07 ? 1 : Math.min(1, 0.054 * zs * g);
const f = s >= 1 ? [540, 540] : [c[0] + (540 - c[0]) * s, c[1] + (540 - c[1]) * s];
document.getElementById("inner").setAttribute("transform", `translate(${f[0]} ${f[1]}) scale(${s}) translate(-540 -540)`);
document.getElementById("outer").style.display = t < T1 + 0.02 ? "inline" : "none";
}
const clock = { t: 0 };
document.fonts.ready.then(() => {
measure();
tl.to(clock, { t: 2.4, duration: 2.4, ease: "none", onUpdate: () => draw(clock.t) }, 0);
draw(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>
Ein Schlusssatz baut sich auf einer Akzentlinie auf: Schwere Wörter steigen aus der Linie (darüber beschnitten, kritisch gedämpft, etwa 95 px in 0,56–0,58 s), während jede Serifenphrase zunächst aus einer unsichtbaren Linie knapp unter einer Warteposition über der Zeile aufsteigt (0,5 s), verharrt und dann, sobald der Beschnitt aufgehoben ist, in weiteren 0,5 s kritisch gedämpfter Landung auf die Zeile oder die Linie sinkt. Das letzte schwere Wort kommt zuletzt, die Betonung entsteht also durch gemeinsame Ausrichtung und Größe.
Wann einsetzen Eine Schlussaussage als Struktur aufbauen, ein tragendes Wort nach dem anderen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Phrasen setzen sich auf eine Plattform</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.6" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="3.6" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="over-line"><rect x="-40" y="-400" width="1160" height="852.5" /></clipPath>
<clipPath id="wait-a"><rect x="-40" y="-400" width="1160" height="716" /></clipPath>
<clipPath id="wait-b"><rect x="-40" y="-400" width="1160" height="809" /></clipPath>
</defs>
<g id="g-a" clip-path="url(#wait-a)"><text id="phrase-a" class="serif" x="60" y="300" font-size="54">Your idea is ready to</text></g>
<g id="g-b" clip-path="url(#wait-b)"><text id="phrase-b" class="serif" x="509" y="396" font-size="54">Motion</text></g>
<g clip-path="url(#over-line)">
<text id="heavy-a" class="heavy" x="57" y="452" font-size="117" letter-spacing="4.1">MOVE.</text>
<text id="heavy-b" class="heavy" x="706" y="453" font-size="119" letter-spacing="4.1">FAB.</text>
</g>
<rect x="60" y="452.5" width="960" height="4" fill="#FB2D89" />
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
// Critically damped arrival (k = 6: no overshoot), normalised to land exactly at the end of its tween.
const K = 6, arrive = (p) => (1 - (1 + K * p) * Math.exp(-K * p)) / (1 - (1 + K) * Math.exp(-K));
const RISE = 70; // serif phrases start this far under their waiting place, hidden by the clip
tl.fromTo("#phrase-a", { y: RISE }, { y: 0, duration: 0.5, ease: arrive }, 0.1); // rises to wait above the row
tl.fromTo("#heavy-a", { y: 90 }, { y: 0, duration: 0.56, ease: arrive }, 0.5); // rises out of the line
tl.set("#g-a", { attr: { "clip-path": "none" } }, 1.0); // release, then settle onto it
tl.fromTo("#phrase-a", { y: 0 }, { y: 58, duration: 0.5, ease: arrive, immediateRender: false }, 1.0);
tl.fromTo("#phrase-b", { y: RISE }, { y: 0, duration: 0.5, ease: arrive }, 1.34);
tl.set("#g-b", { attr: { "clip-path": "none" } }, 1.76);
tl.fromTo("#phrase-b", { y: 0 }, { y: 55.9, duration: 0.5, ease: arrive, immediateRender: false }, 1.76);
tl.fromTo("#heavy-b", { y: 95 }, { y: 0, duration: 0.58, ease: arrive }, 2.04); // the last word lands last
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>
Die Kamera taucht am Fuß des Stamms eines schweren Buchstabens ein: Der natürliche Logarithmus des Maßstabs beschleunigt (etwa x40 in 1 s), während der Fuß des Stamms am Bild vorbei nach unten getragen wird, bis die Papierfarbe des Stamms das Bild füllt. Unter dieser vollständigen Verdeckung wechselt die Szene zum Eröffnungsbild, von innen im Stamm seines ersten Wortes gesehen, und die Kamera zieht mit abbremsendem logarithmischem Maßstab heraus (etwa x22 auf x1 in 0,95 s) und landet exakt in der Eröffnungskomposition, sodass der Film nahtlos loopt.
Wann einsetzen Ein nahtloser Loop oder ein Match Cut zwischen zwei Szenen, die eine Buchstabenform teilen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Eintauchen in einen Buchstabenstamm und Ausschleifen aus einem anderen</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=Pliant:wdth,[email protected],100..900&family=Playfair+Display:wght@400&display=block");
:root { --field: #1C0B5D; --paper: #FAF9FF; --accent: #FB2D89; }
html, body { margin: 0; background: var(--field); }
#root { position: relative; width: 1080px; height: 1080px; overflow: hidden; background: var(--field); }
#root svg { position: absolute; inset: 0; width: 1080px; height: 1080px; }
.heavy { font-family: "Pliant", sans-serif; font-weight: 900; font-stretch: 105%; fill: var(--paper); }
.serif { font-family: "Playfair Display", serif; font-weight: 400; fill: var(--paper); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.2" data-width="1080" data-height="1080">
<svg class="clip" data-start="0" data-duration="2.2" viewBox="0 0 1080 1080" xmlns="http://www.w3.org/2000/svg">
<g id="scene-a">
<path d="M60 455H1020" stroke="#FB2D89" stroke-width="4" />
<text id="word-a" class="heavy" x="178" y="568" font-size="138" letter-spacing="1.8">TIMELINE</text>
</g>
<g id="scene-b">
<path d="M60 712L1020 697" stroke="#FB2D89" stroke-width="4" />
<text id="word-b" class="heavy" x="43" y="524" font-size="320" letter-spacing="-5">HUNT</text>
</g>
</svg>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const CUT = 1.05; // the switch, under full occlusion
let A = [0, 0], B = [0, 0];
function measure() { // stem feet: the I of the first word and the T of the second, on their baselines
const a = document.getElementById("word-a").getExtentOfChar(1), b = document.getElementById("word-b").getExtentOfChar(3);
A = [a.x + a.width / 2, 568]; B = [b.x + b.width / 2, 524];
}
function draw(t) {
const sa = document.getElementById("scene-a"), sb = document.getElementById("scene-b");
if (t < CUT) { // dive: ln(scale) accelerates, the foot is carried down past the frame
const u = t / CUT, s = Math.exp(4.6 * u * u * u), ax = A[0] + (540 - A[0]) * u, ay = A[1] + 3000 * Math.pow(u, 6);
sa.setAttribute("transform", `translate(${ax} ${ay}) scale(${s}) translate(${-A[0]} ${-A[1]})`);
sa.style.display = "inline"; sb.style.display = "none";
} else { // pull out of the other stem, decelerating, to rest
const u = Math.min(1, (t - CUT) / 0.95), w = 1 - u, s = Math.exp(3.1 * w * w * w), ax = B[0] + (520 - B[0]) * w * w, ay = B[1] + 2800 * Math.pow(w, 4);
sb.setAttribute("transform", `translate(${ax} ${ay}) scale(${s}) translate(${-B[0]} ${-B[1]})`);
sa.style.display = "none"; sb.style.display = "inline";
}
}
const clock = { t: 0 };
document.fonts.ready.then(() => {
measure();
tl.to(clock, { t: 2.2, duration: 2.2, ease: "none", onUpdate: () => draw(clock.t) }, 0);
draw(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>
Simple MotionPrompt-Code: NPXplaceholder
Einmal verwendet
Simple MotionPrompt-Code: MOV<direction> Erstelle ein vertikales, 19,2 Sekunden langes Brand-Reel (1080x1920, 30 fps), das nahtlos loopt. Es besteht ganz aus Motion Graphics, geschnitten auf einen 150-BPM-Beat (0,4 s pro Schlag, 12 Takte). Die Idee: Ein glänzender Ball ist der Held des ganzen Films. Er hüpft durch einen Manifest-Hook mit einem Wort pro Schlag, wird zum Gewicht eines Pendels, verwandelt sich in eine Lampe, die eine Seite beleuchtet, wartet hinter deinem Markennamen eine schnelle Montage ab und endet allein auf der Endkarte genau dort, wo das erste Bild beginnt. Der Look: kräftige redaktionelle Typografie auf flachen Hintergründen in tiefer Nacht und Papier, ein Pink-zu-Orange-Verlauf als Akzent und ein violetter zweiter Akzent. Tempo: hektisch in den ersten 3,2 s, dann zwei lange, atmende Szenen im Zwei-Schlag-Puls, ein 3,2 s langer Ausbruch aus Achtelschnitten, ein 2 s langer Höhepunkt und ein ruhiger Loop-Punkt. Vermeide Footage, Voice-over, weiche Überblendungen und jeden Schnitt, der den Beat verfehlt: Jeder Schnitt sitzt auf einem Schlag oder halben Schlag. Wörter in Akzentfarbe müssen dasselbe ExtraBold-Gewicht wie der Rest haben, nie dünner. </direction> <structure> 1. Hook, 0–3,2 s. Ein dunkles Bild. Der Ball (140 px) startet in der Mitte und fällt auf eine Bodenlinie bei etwa y 1516, schrumpft dabei auf 88 px und landet bei 0,37 s. Ab 0,4 s erscheint pro Schlag ein Wort, dann pro halbem Schlag: „wir“ (0,4), „nur“ (0,8), „prompten“ (1,2), „nicht.“ (1,6), „wir“ (2,0), „führen Regie.“ (2,2, im Akzentverlauf), „tippen“ (2,6), „Licht“ (2,8), „Tiefe“ (3,0). Ersetze diese durch deine eigenen Manifest-Zeilen. Der Hintergrund wechselt bei jedem Schnitt zwischen dunkel und Papier. Bei „Licht“ und „Tiefe“ fliegt der Ball nach oben links hinaus. 2. Pendel, 3,2–8,0 s. Papierhintergrund. Der Ball wird zum Gewicht (112 px) einer dünnen dunklen Stange, die an einem Drehpunkt 380 px über der oberen Mitte hängt (Armlänge 1317 px). Ein unscharfer Schatten von Stange und Gewicht ist nach rechts versetzt. Ein zweizeiliger Titel in Versalien sitzt in der Mitte und wechselt bei jedem Ausschlag: „VON HAND / GEMACHT?“ → „VOM CODE / GEMACHT.“ (zweite Zeile im Akzent) → „KEINE / TIMELINE.“ → „KEINE / KEYFRAMES.“ → „NUR / WORTE.“ (Akzent) → „UND / LICHT.“. Das sind Beispiele zum Ersetzen. Bei 7,2 s geht das Licht jenseits der Stange aus, und der letzte Ausschlag zieht die Dunkelheit über das Bild. 3. Lampe, 8,0–12,8 s. Dunkel #14112E. Der Ball wird zu einer leuchtenden Lampe, deren Lichtkegel eine Papierseite enthüllt. Die Seite zeigt „LICHT / IST NUR / MATHE.“ in Versalien (Beispiel; die letzte Zeile in Violett) und ein kleines Logo-Lockup bei etwa y 1430: ein Verlaufspunkt und dein Wortzeichen in Tinte. Ab 12,27 s ist die ganze Seite beleuchtet. 4. Montage, 12,8–16,0 s. Beim Drop steht „[deine Marke]“ in Anton (etwa 260 px hoch, zentriert) still, während sich die Welt dahinter bei jeder Achtelnote (0,2 s) ändert. Die Welten der Reihe nach: - ein glänzender, marmorierter pink-oranger 3D-Blob mit deutlich sichtbarer Kante auf Grau - derselbe Blob näher - flache Blöcke: violette, dunkle und papierfarbene Quadrate sowie der Akzentverlauf - hypnotische Tinte-und-Papier-Ringe, die zoomen und sich drehen - ein leeres Papieranhänger-Schild, das an einer Schnur über Violett schwingt - ein Feld dunkler Tastaturtasten von oben, einige pinke und orange Tasten werden gedrückt - ein Torus aus deutlich getrennten Halbtonpunkten auf Dunkel - flaches Violett mit einem schwachen Raster - 3D-Spielzeugformen, die auf dunklem Pflaumenton purzeln (Würfel, Kugeln, Ringe, Kegel und Kapseln in den Palettenfarben plus Gelb #FFD23F) - dieselben Formen unscharf auf Pastellrosa - ein gläsernes Smartphone auf Grau - der Blob auf Violett - ein Boden aus weißen Würfeln, aus dem pinke und orange Säulen wachsen - der Halbton-Torus als Tintenpunkte auf Weiß - flaches Korallrot mit Raster 5. Voxel-Finale, 16,0–18,2 s. Violetter Hintergrund. Ein kurzes Wort (dein Produkt oder die zweite Hälfte deines Markennamens) wird aus kleinen Würfeln gebaut. Es ist bei 16,6 s vollständig geformt, atmet und zerfällt ab 17,72 s, während sich aus der Mitte ein Schwarzes Loch öffnet und das Bild bis 18,17 s füllt. 6. Endkarte, 18,2–19,2 s. Dunkel. Der Ball wächst aus dem Nichts in der Mitte (142 px bei x 539, y 959). Dein Wortzeichen im Pink-zu-Orange-Verlauf erscheint darunter bei 18,1 s, bleibt stehen und blendet bei 18,85 s aus. Übrig bleibt nur der Ball, genau dort, wo das erste Bild des Films beginnt, sodass der Loop nahtlos ist. </structure> <composition> Palette: - tiefe Nacht #0C0A1E und ein etwas helleres #14112E für die dunklen Szenen - Papier #F2EFFA für die hellen - Tinte #1C0B5D für Schrift auf Papier - ein Pink-zu-Orange-Akzentverlauf #FB2D89 → #FE9117 - ein violetter zweiter Akzent #7C4DFF - Gelb #FFD23F nur für die Spielzeugformen Hook-Wörter sind bei dunklen Schnitten papierfarben und bei Papierschnitten tintenfarben. Schrift: - Wörter und Titel in Manrope ExtraBold mit enger Laufweite (-0,035em bei den Versaltiteln) - der Markenname in der Montage in Anton - ein kleiner Handle „@yourbrand“ (ersetzen) in JetBrains Mono oben links, 56 px vom linken Rand und 246 px von oben, für den ganzen Film Pendeltitel: Zeile eins etwa 145 px Versalhöhe, Zeile zwei etwa 128 px, zentriert. Der Ball ist eine glänzende Kugel: ein weiches weißes Highlight oben links auf einem Körper mit Verlauf Orange → Pink → tiefes Magenta. Markenname in der Montage: drei Ebenen (ein harter Schatten mit 9 px Versatz, eine 16-px-Kontur und die Füllung). Er ist weiß mit dunkler Kontur auf dunklen oder unruhigen Welten und dunkel mit weißer Kontur auf hellen. Voxel-Wort: eine Zeile, etwa 430 px hoch und 890 px breit. Der erste Buchstabe hat einen Verlauf von Pink nach Orange von oben nach unten; die übrigen sind papierweiß. Endkarte: Ball zentriert; das Wortzeichen im Verlauf bei etwa y 1225, etwa 620 px breit. </composition> <techniques> Hook: - Jedes Wort landet in vier Frames mit starkem Ease-out (power3.out). Die Eingänge wechseln sich ab: eine Laufweite, die sich von einem halben Em schließt, ein Zoom-Drop von 125 % und 320 px tiefer, eine vertikale Streckung von 260 % an der Grundlinie verankert und ein Einschieben von 835 px links außerhalb. - Hintergrundwechsel sind harte Schnitte. - Bei jedem Schnitt schwillt der Ball einen Frame lang an Ort und Stelle auf 125 % an und ist im nächsten Frame am höchsten Punkt seines Hops. Über fünf Frames gleitet er in die andere Ruheposition (x 287 oder 788) und schrumpft dabei zurück. Pendel: - Es schwingt ±23,6° mit power3.inOut in 0,34 s, jeder Ausschlag zentriert auf jedem zweiten Schlag (3,6, 4,4, 5,2, 6,0, 6,8, 7,6 s), und hält an den Enden. - Drei verblasste Kopien im Abstand eines Frames ziehen dem Gewicht nach. - Die Stange ist deutlich sichtbar, ihr Schatten auffällig. - Jeder Ausschlag wischt den Titel in den nächsten. Der neue Titel zeigt sich auf der Seite, die das Gewicht schon passiert hat, der alte auf der anderen, mit rechteckigen Inset-Masken im selben Easing. - Bei 7,2 s wird alles jenseits der Linie der Stange dunkel, und der letzte Ausschlag zieht die Dunkelheit über das Bild. Lampe: - Der Ball gleitet in einer Drittelsekunde zur Mitte und beginnt zu glühen, mit einem weichen orange-pinken Halo von etwa 220 px um ihn. - Ein Lichtkegel öffnet sich vom Ball als 7°-Splitter, der senkrecht nach oben zeigt. Er schwenkt nach links und rechts nach unten und wird dabei breiter, während sich der Ball bewegt: bis etwa x 800, y 1090, dann x 900, y 975, dann hinauf zu x 760, y 560. - Der Kegel setzt sich über den Worten fest, 120° breit und nach unten zeigend. - Der Kegel ist eine keilförmige Maske mit der Spitze am Ball, die die Papierseite unter dem Dunkel enthüllt. Eine Kopie der Seite bei 28 % Deckkraft, auf jeder Seite 4,5° breiter, ergibt einen harten grauen Halbschatten. - Ab 12,27 s öffnet sich der Kegel in 0,33 s mit einem In-out-Easing auf 360°. Montage: harte Schnitte alle 0,2 s hinter dem stillstehenden Namen. Jede Welt bewegt sich in ihrem Slot: Die Ringe zoomen und drehen sich, das Schild schwingt, die Tasten drücken sich, die Formen purzeln, die Säulen wachsen. Voxel-Finale: - Etwa 800 kleine Würfel, drei tief, auf einem 11x18-Raster pro Buchstabe. - Die Würfel starten in der Tiefe verstreut und fliegen mit einem Quartic-in-out in einer halben Sekunde an ihren Platz, um bis zu 0,18 s gestaffelt, während Funken an der Kamera vorbeirasen. - Das Wort atmet: Jeder Buchstabe dreht sich ein wenig um sein Zentrum, und eine Welle läuft durch seine Reihen. - Ab 17,72 s zerplatzt jeder Würfel nach außen und zur Linse hin, mit Bewegungsunschärfe gestreift. - Eine dunkle Scheibe öffnet sich aus einem Nadelloch in der Mitte (power3.in, 0,37 s ab 17,8 s) und füllt das Bild bis 18,17 s, während die Würfel darüber fliegen. Endkarte: Der Ball wächst in etwa 0,12 s aus dem Nichts, und das Wortzeichen blendet bei 18,85 s aus. </techniques> <music> Erzeuge einen originalen, dunklen, druckvollen elektronischen Instrumentaltrack mit 150 BPM in d-Moll mit Half-Time-Feeling (Kick auf eins, Snare auf drei). Er hat einen verzerrten, pulsierenden Achtelbass, straffe Drums und angespannte Pads sowie einen textlosen, bearbeiteten Vocal-Chop als Textur, ohne Gesang. Er läuft ab dem ersten Bild. Seine Kicks und Snares fallen auf die Wortschnitte und die Ausschläge des Pendels, und er droppt bei 12,8 s. Er endet mit einem schweren Schlag mit dunklem Akkord genau auf dem Schwarzen Loch bei 18,0 s, der unter der Endkarte ausklingt. Schneide ihn auf den Takt genau auf 19,2 s. </music> <sound> Lege diese Sounds über die Musik: - ein sanfter Klick bei jedem Wort-Flash - ein Whoosh bei jedem Ausschlag - ein Riser ins Pendel - ein fallender Sweep, wenn das Licht ausgeht - eine Glocke, wenn der Ball aufleuchtet - ein Riser in einen Boom bei der Montage bei 12,8 s - ein leises Ticken bei jeder neuen Welt - ein Whoosh, wenn die Würfel heranrasen - ein kleiner Boom, wenn das Wort landet - ein Riser in einen tiefen Boom unter dem Schwarzen Loch Keine Stimme. </sound>
2-mal verwendet
Simple MotionPrompt-Code: SYP<direction> Erstelle ein 15,5 Sekunden langes vertikales Marken-Reel (1080x1920, 30 fps). Ein 3D-Handy-Flug über das Profil meiner Marke wird zu einem Logo-Moment, danach folgt Kinetic Typography, silbenweise geschnitten zu einem harten Half-Time-Trap-Beat, und endet auf meinem Logo. Alles ist gezeichnet, ohne gefilmtes Material. Verwende mein Logo und anstelle der Beispiele unten die Farben und Wörter meiner Marke. Der Look besteht aus drei Welten: Verläufe von tiefem Marineblau bis fast Schwarz für den 3D-Teil, ein hellgraues Studio in der Mitte und reines Schwarz mit Neon-Glühen am Ende. Vermeide eine quadratische Platte oder einen Würfel hinter dem Logo, gespiegelte Buchstaben, wenn ein Wort hinter etwas vorbeigeht, Text, der den Bildrand berührt, ein auf dem Kopf stehendes Bild nach einem Kameraschwenk und ein flaches oder gestauchtes Hologramm-Logo. Der Handybildschirm muss genau in seinen Rahmen passen. </direction> <structure> 1. 0–4,3 s, Handy-Flug. Ein 3D-Handy (eine Bildschirmseite und eine leuchtende silberne Rückseite mit Kamerabuckel) taumelt klein und schräg, mit der Rückseite voran, herein. Es dreht sich um etwa 200 Grad und setzt sich bei 1,05 s aufrecht auf seinen Bildschirm (power2.out). Der Bildschirm sitzt mittig im Bild mit gleichmäßigem Rand auf allen Seiten. Er zeigt die Marke wie ein Social-Profil: Handle, einen runden Avatar mit meinem Logo, Name und einzeiligen Slogan, eine zweizeilige Bio mit der Website, einen pinken Hauptbutton und vier runde Highlights, deren Beschriftungen sich nicht überlappen. Darunter ein 3x3-Raster aus etwas kleinen, bunten Kacheln mit abgerundeten Ecken, die auf den Bildschirm passen, mit kurzen Beschriftungen, die in jede Kachel passen ("IDEAS IN MOTION", "3D", "LOGO REVEAL"; durch deine ersetzen). Ab 1,05 s kippt das Handy um etwa 48 Grad nach hinten und wird größer, während die Kacheln in unterschiedlichen Höhen vom Bildschirm zur Kamera abheben. Ein Whip-Pan bei 1,95 s landet nah am Profil-Header. Die Kamera fährt langsam die Bio hinunter und neigt sich dabei, bis ein zweiter Whip bei 3,0 s sie nach unten auf den Avatar schwenkt. Sie landet aufrecht, sodass das Profil lesbar bleibt. Drei leuchtende pinke Ringe stapeln sich aus dem Avatar heraus (back.out, 80 ms Abstand). Eine runde Kopie meines Logos mit pinker Kontur und Glühen steigt aus ihnen auf und neigt sich wie ein Hologramm zum Betrachter. 2. 4,3–6,5 s, 3D-Logo. Harter Schnitt auf mein Logo-Zeichen selbst, in 3D extrudiert: ein Stapel dünner Schichten in einem tiefen Ton (zum Beispiel dunkles Pink) hinter der beleuchteten Vorderseite, ohne Quadrat dahinter. Es glüht auf einem marineblauen radialen Verlauf. Es dreht sich aus einer geneigten Pose herein (power3.out, 1 s), wackelt und dreht sich dann klein weg (power3.in) in den Schnitt. Ein kräftiges Wort wie "AHHHH" (durch deins ersetzen) sitzt auf einem Ring direkt unter dem Logo, nie darüber. Es ist in der extrafetten Grotesk gesetzt, mit Orange-zu-Pink-Verlauf und weichem pinkem Glühen, Buchstaben mit Abstand und nie gespiegelt. Das Wort streicht über die Vorderseite und fliegt dann mit dem Logo davon. Ab 4,75 s blendet ein riesiges Umriss-Hintergrundwort ("OMG") ein und driftet nach oben. 3. 6,5–9,2 s, getippte Wörter in einem hellen Raum. Harter Schnitt in einen hellgrauen Raum mit Vignette. Wörter werden Buchstabe für Buchstabe auf den Silben des Beats getippt, in einer 3D-Gruppe, über die die Kamera driftet. Zuerst "yeah". Dann "she" in Weiß auf einer schwarzen Box, die zuerst als dünne Linie erscheint und aufschnappt. Dann "typed" in Pink, "one" und ein größeres "single prompt". Bei 8,1 s schließt sich die Vignette in 0,22 s zu einer horizontalen Ellipse und öffnet sich in 0,25 s wieder, während die alten Wörter nach links davonfliegen. Neue Wörter fallen aus einer Unschärfe von oben herein: "Now" / "it moves like". Ein pinkes "magic" steigt unscharf von unten auf, kurz vor dem Schnitt. 4. 9,2–15,5 s, Neon-Stapel und Logo. Schnitt auf Schwarz mit dem pink leuchtenden "magic" oben. Jede nächste Zeile hat ihre eigene Farbe, ihr eigenes Glühen und ihren eigenen Auftritt, und sie stapeln sich: "And I'm" in Orange, "unstoppable" in Violett, "might do" in Weiß, "MOTION" in Pink. Der Stapel dreht sich langsam in 3D und fliegt dann bei 11,95 s in 0,25 s nach oben hinaus. Eine Schlusszeile poppt Wort für Wort aus einer Unschärfe in Pink auf: "no" / "more" / "timelines". Bei 12,7 s fallen fünf Metallbalken von oben darüber. Bei 13,25 s wird alles ausgeblendet und unscharf, und mein Logo in Weiß mit einem weit gesperrten Slogan ("YOUR TAGLINE HERE") blendet aus der Unschärfe ein und bleibt bis zum Ende stehen. Alle zitierten Wörter sind Beispiele, die du durch deine eigenen ersetzt. </structure> <composition> Beispielpalette: Marineblau #1C0B5D, fast Schwarz #04020C, Hot Pink #FB2D89, Orange #FE9117, Violett #8F7BFF, Hellgrau #D2D4D9, Textgrau #4A4E56 und Weiß. Verwende eine kräftige Grotesk, extrafett mit enger Laufweite (-0,045em), zum Beispiel Manrope ExtraBold, für jedes Wort. Das Hintergrundwort in Szene 2 ist eine riesige Kontur (Text-Stroke mit etwa 20 % Alpha). Der 3D-Teil liegt auf Verläufen von tiefem Marineblau bis fast Schwarz, die Logo-Szene auf einem marineblauen radialen Verlauf. Die Mitte ist ein hellgrauer Raum mit Vignette, das Ende ist reines Schwarz mit Neon-Glühen. Halte jede Textzeile mit Sicherheitsrand im Bild, besonders die langen Zeilen "And I'm" und "unstoppable". Die Schlusskarte ist das Logo zentriert in Weiß mit einem kleinen, weit gesperrten Slogan darunter. </composition> <techniques> Whip-Pans: 0,08 s mit 14 px Unschärfe, ein Sprung zum neuen Ausschnitt, dann 0,12 s zurück zur Schärfe. Ringe stapeln sich mit back.out, 80 ms Abstand. Das Logo-Hologramm steigt mit pinker Kontur und Glühen und leichter Neigung zur Kamera auf. Das 3D-Logo dreht sich mit power3.out (1 s) herein und mit power3.in hinaus. Getippte Buchstaben klappen jeweils von unten hoch (rotationX -70, back.out, 0,18 s, 30–70 ms Abstand). Die "she"-Box öffnet sich aus einer dünnen Linie mit einem Schnappen. Der Iris-Übergang schließt die Vignette zu einer horizontalen Ellipse (0,22 s) und öffnet sie wieder (0,25 s). Neon-Zeilen-Auftritte: Die Buchstaben von "And I'm" schlagen groß herein, "unstoppable" gleitet unscharf von rechts herein, "might do" steigt Buchstabe für Buchstabe auf, und die Buchstaben von "MOTION" peitschen mit Neigung und Bewegungsspur von links herein. Der Stapel verlässt das Bild in 0,25 s nach oben. Die Schlusswörter poppen einzeln aus einer Unschärfe auf. Fünf Metallbalken fallen von oben (power3.in, 30 ms Abstand). Am Ende wird alles unscharf ausgeblendet, dann blendet das Logo aus 24 px Unschärfe ein (0,45 s) und wächst beim Halten langsam um 4 %. Wörter wechseln alle 0,1–0,3 s auf den Silben des Beats; nur das Logo bleibt stehen. </techniques> <music> Etwa 147 BPM Half-Time-Trap in g-Moll, instrumental, ohne Gesang. Unter dem Handy-Teil spielt ein dunkles Glockenmotiv mit steigender Spannung. Der volle Beat (harte 808-Kick, verzerrter Sub, Clap, rollende Hi-Hats mit Triolen-Rolls) setzt genau beim Schnitt auf das 3D-Logo bei 4,33 s ein. Kürze den Track so, dass der Drop genau dort landet. Am Ende ausblenden. </music> <sound> Nur Sounddesign über der Musik: ein Boom, wenn das Handy landet, Whooshes bei den zwei Whip-Pans und ein Schimmern für das Hologramm-Logo. Füge einen Hit beim Schnitt auf das 3D-Logo, einen Impact beim Schnitt auf den hellen Raum und ein Whoosh bei der Iris hinzu. Dann ein Boom beim Schnitt auf Schwarz, Whooshes, wenn Zeilen hereingleiten und davonfliegen, einen Metall-Hit, wenn die Balken landen, und einen tiefen Boom beim finalen Logo, dann ein Ausblenden. Kein Voice-over. </sound>
7-mal verwendetNewsletter
Wir schicken dir die besten neuen Community-Prompts mit ihren Videos. Kein Spam, und in jeder Mail steht ein Abmeldelink.
Wir nutzen deine Adresse nur für diesen Newsletter. Datenschutzerklärung