Simple MotionPrompt-Code: NPXProdukt-Reel „Lebendes Exemplar“ mit Logo-Morph
placeholder
Einmal verwendetEin 15-sekündiges Querformat-App-Reel aus Kinetic Type und UI-Grafik: Chip-Wolke, Cursor-Titel, Kameratauchgang, Diagramm, Live-Editor, drei Schritte und Endkarte.
Prompt-Code MOCVeröffentlicht 3-mal verwendet
Prompt verwendenDer Prompt öffnet sich in der App: Füg dein eigenes Material hinzu und der Agent baut das Video.
Prompt meldenErstelle ein 15-sekündiges Produkt-Reel im Querformat (1920x1080, 60 fps) für meine App, komplett aus Typografie und Interface-Grafiken aufgebaut und auf einen 128-BPM-House-Beat geschnitten. Es soll sich wie ein hochwertiges Motion-Design-Showreel anfühlen. Jede Szene übergibt mit einer Bewegung an die nächste, nie mit einem einfachen Schnitt: ein Blitz, ein Cursor, ein Tauchgang durch einen Buchstaben, eine sich faltende Karte, Spaltenwischer, ein Burst, ein Zusammenquetschen zu einer Linie. Fast auf jedem Beat landet etwas. Das Reel führt von einer dunklen gepunkteten Leinwand unter einem kameraartigen HUD zu einer hellen Editor-Seite in der Mitte, dann zu einer pinken Seite gegen Ende und einer dunklen Endkarte mit dem Icon und Namen meiner App. Verwende den Namen meiner App, mein quadratisches App-Icon, meine Webadresse und meine eigenen kurzen Textzeilen anstelle der unten zitierten Beispiele. Keine Fotos oder Videoaufnahmen. Zeichne alle Icons (Pfeile, Chevrons, Sterne, Häkchen, Kreuze, kleine Quadrate, die Caret-Box) als Vektorformen, nie als getippte Zeichen, damit nie eine Ersatzschrift oder ein leeres Kästchen erscheint. Kein Text darf über den Bildrand oder aus seiner Pille laufen, und jede Decode- oder Tipp-Animation muss beim richtigen Text enden.
Beat-Raster: 128 BPM ab 0 s, also ist ein Beat 0,469 s und ein Takt 1,875 s. Der Blitz landet auf Takt 2 (1,875 s), die pinke Seite bricht auf Takt 7 (11,25 s) hervor und die Endkarte schlägt auf Takt 8 (13,125 s) ein. Feature-Highlights landen in Szene 3 auf vier aufeinanderfolgenden Beats, die Edit-Wechsel in Szene 4 auf vier aufeinanderfolgenden Beats.
0–1,9 s, Chip-Wolke und Wortwechsel. Etwa 24 kleine abgerundete Chips schweben an festen Plätzen um die Mitte der dunklen Leinwand. Jeder ist Mono 21 px mit einem Punkt links und einem dünnen Rand; einige haben einen pinken Rand. Jeder Chip ist um einige Grad gedreht und leicht in 3D gekippt, und manche sind unscharf, als wären sie außerhalb des Fokus. Sie werden nacheinander von 0,08 s bis 1,1 s scharf (Deckkraft, Unschärfe von 6 px bis scharf, Skalierung von 0,94 auf 1 in 0,22 s) und driften ein paar Pixel. Ihr Text listet auf, was die App kann, z. B. "Kinetic type, shapes", "Describe your idea", "Live preview", "MP4 export". Ein Mono-Kicker "TELL THE CHAT WHAT TO SHOW" wird ab 0,4 s aus zufälligen Zeichen über der Mitte entschlüsselt. Eine riesige 155-px-Schlagzeile "No keyframes." steigt ab 0,11 s Buchstabe für Buchstabe auf. Bei 0,92 s verlässt das zweite Wort die Zeile nach oben durch die Oberkante, Buchstabe für Buchstabe, alles innerhalb von 0,1 s. "timeline." steigt in Orange an seiner Stelle in etwa 0,13 s auf; das erste Wort bewegt sich nie. Bei 1,42 s verlässt die ganze Schlagzeile die Szene nach oben, und in der Mitte erscheint ein winziges leuchtendes Quadrat, das auf etwa 42 px wächst. Ab 1,58 s kippt jeder Chip stark und fliegt entlang seiner Linie von der Mitte auf die Kamera zu und an ihr vorbei, in 3D-Perspektive (0,22 s, beschleunigendes Ease-in im Stil von power1).
1,9–3,7 s, Blitz, Cursor und Tauchgang. Ein rosagrauer Blitz füllt das Bild und klingt in 0,25 s ab, während 40 dünne Strahlen nach außen schießen und sich zwei weiche Ringe ausdehnen. Das Quadrat (orange, abgerundet) kommt mit etwa 45 px geneigt an und schwillt in einer Viertelsekunde auf etwa 215 px an, während es sich aufrichtet. Dann arbeitet es als Cursor: Ein riesiger Titel "OPEN APP" (311 px, fast die Bildbreite) steigt Buchstabe für Buchstabe auf, während das Quadrat den Buchstaben vorausläuft und dabei schrumpft. Es landet als Schlusspunkt (etwa 60 px) und wird pink. Bei etwa 2,66 s springt unter dem Titel eine pinke Pille mit meiner Webadresse auf (Back-out-Ease) und wird entschlüsselt. Es folgt ein langsamer Push-in. Bei 3,2 s taucht die Kamera in die Punze des ersten O: Der Titel skaliert auf einer beschleunigenden Kurve (etwa 1,07 auf 3 in 0,3 s, dann auf 22 bis 0,5 s), während das O in die Mitte gleitet. Die nächste Szene scheint durch das Loch des O und füllt das Bild, während der Rand des Buchstabens vorbeifliegt.
3,25–5,8 s, das Diagramm. Eine dunkle Szene mit einem kleinen Label oben links: ein gezeichnetes kleines Quadrat, dann "02 —— DESCRIBE THE VIDEO". Eine zentrale Karte hat einen pinken Rand, mein Logo und den App-Namen, einen kleinen Mono-Untertitel wie "AI MOTION DESIGNER", einen türkisen Punkt mit meiner Webadresse und vier Feature-Buttons wie "Edit in words", "No keyframes", "Live preview", "MP4 export". Links gleiten drei Eingänge herein ("Footage", "Photos", "Logos", jeweils mit einem kleinen gezeichneten Icon). Rechts gleiten sechs Ausgänge im Abstand von 50 ms herein: "Kinetic type", "Shapes", "3D effects", "Music", "Sound effects", "Vertical", jeweils mit einer kleinen Mono-Unterzeile und einem Tag. Die Schlagzeile "From idea to video in one chat." steigt oben rechts Buchstabe für Buchstabe auf, ihre letzten Wörter in Orange. Geschwungene Leitungen werden von den Eingängen zur Karte und von der Karte zu den Ausgängen gezeichnet, mit leuchtenden Punkten, die entlang fließen. Die vier Feature-Buttons füllen sich pink, einer pro Beat. Bei 5,6 s pulsiert die Karte und faltet sich zu einem schmalen, schlichten hellen Balken zusammen.
5,7–9,75 s, die helle Seite. Die helle Seite öffnet sich aus diesem Balken. Sie weitet sich in etwa 0,23 s von ca. 80 px auf das volle Bild (langsam, dann schnell, dann auslaufend) mit einer Bewegungsunschärfe, die sich beim Landen auflöst.
Linke Seite: ein kleines Label (gezeichnetes Quadrat, "03 —— LIVE PREVIEW"), ein zweizeiliger Titel "Chat instead / of a timeline." (zweite Zeile pink), der Buchstabe für Buchstabe aufsteigt, zwei Zeilen gedämpfter Fließtext "Tell the chat what to show. / The agent builds the animation.", die Wort für Wort aufsteigen, und fünf kleine Punkte.
Rechte Seite: ein weißes Editor-Fenster mit Ampel-Buttons, meiner Adresse in der Titelleiste und "Try it free" rechts. Acht nummerierte Mono-Zeilen tippen sich selbst mit etwa 100 Zeichen pro Sekunde und einem pinken Caret, z. B. "Pick a template", "idea = describe(", say="Bigger", der Fließtextsatz in Anführungszeichen, "Refine in words, then export". Eine Statusleiste unten zeigt "MP4 export" mit einer kleinen umrandeten Caret-Box rechts.
Unten läuft ein Streifen aus Wörtern ("bigger", "slower", "another colour", "vertical", "horizontal", "square", "kinetic type" ...) mit etwa 167 px/s nach links. Ab 7,5 s wechselt auf vier Beats in Folge der zitierte Wert nach say= zu "Slower", "Another colour", "Vertical", "Square" in einer pinken Hervorhebungsbox mit einem schnellen Decode. Bei jedem Wechsel zeigt die Statusleiste "Live preview · Slower" und so weiter, ein Punkt wächst in einer neuen Akzentfarbe, und das passende Wort des Streifens wird zu einer pinken Pille. Die ganze Seite schiebt sich langsam um 2,5 % heran.
9,45–11,35 s, Keyframes gegen Worte. Ein kleines Label (gezeichnetes Quadrat, "04 —— NO KEYFRAMES") sitzt oben links. Neun vertikale Spalten wischen die dunkle Szene über die helle, abwechselnd von oben und von unten. Jede dauert 0,15 s, mit weicher Kante und einem leuchtenden pinken Balken an der Vorderkante. Eine Schlagzeile "Edit in words." steigt auf. Eine pinke Pille mit einer zitierten Anfrage wie 'Bigger', 'slower' ist durch eine Linie mit einer abgerundeten Raute mit der Beschriftung "AGENT" verbunden. Ein leuchtender Punkt läuft zu einer oberen Karte "keyframes / to hunt for", die orange wird, mit einem gezeichneten Kreuz im "NO"-Badge und einem gestrichelten Pfad. Dann läuft der Punkt den unteren Pfad entlang (kleines Label "say what should change") zu einer Karte "chat/say-what-should-change / live preview". Diese Karte wird türkis, mit einem gezeichneten Häkchen im "LIVE"-Badge und einem Glühen. Währenddessen steigt "Live preview." nach der Schlagzeile in Orange auf, und unten steigen drei kleine Kennzahlen auf: "PREVIEW live", "EXPORT MP4", "KEYFRAMES none" in Türkis.
11,15–13,4 s, drei Schritte. Eine pinke Seite bricht als weichkantiger Kreis mit leuchtendem Rand aus dem LIVE-Badge hervor. Sie ist etwa 130 px, dann in den ersten zwei Frames 190 px und rast innerhalb weiterer 0,1 s über die ferne Ecke hinaus. Drei riesige Zahlen "01", "02", "03" (243 px) rollen wie Spielautomaten-Walzen herein, beim Drehen unscharf, und landen von links nach rechts bei 11,32, 11,5 und 11,77 s. Zu jeder gehört eine feine Linie, die sich unter ihrer Zeile zeichnet, ein kleines Mono-Label, das entschlüsselt wird ("TEMPLATE", "IDEA", "EXPORT", jeweils mit einem kleinen gezeichneten gelben Stern davor) und ein Satz, der einblendet ("Pick a template", "Describe your idea", "Refine in words, then export"). Ab 12,65 s wird alles unscharf und vertikal zu einer dünnen Linie quer durch die Bildmitte gequetscht, die zur Schiene der Endkarte wird.
12,8–15 s, Endkarte. Die dünne weiße Linie schießt in zwei Frames auf die volle Breite. Das Icon meiner App (etwa 150 px, auf der Linie sitzend) fährt von rechts an ihr entlang herein, sehr schnell und dann hart bremsend: der größte Teil des Weges in den ersten 0,13 s, bei 13,2 s angekommen, mit ein paar Speed-Streifen dahinter. Es zieht eine dunkle Seite mit, deren abgerundete, geschossförmige Nase ihm folgt und sich dann ausbreitet, bis das Bild bei 13,4 s dunkel ist. Der Name meiner App (Geist 500, 176 px) erscheint hinter dem Icon, während es vorbeifährt, und Icon und Name sitzen zusammen zentriert als ein Lockup. Die Linie schrumpft zu einer Unterstreichung, die etwa 30 px über beide Enden des Lockups hinausreicht, und wird gedimmt. Der Claim "Your AI motion designer." steigt bei 13,75 s Wort für Wort auf. Zwei Pillen-Buttons poppen bei 14,1 und 14,17 s auf, jeder so breit wie seine Wörter plus gleiches Padding, als Paar mit 23 px Abstand zentriert: ein umrandeter mit einem kleinen gezeichneten Chevron und "Try it free" und ein pinker mit meiner Webadresse und einem gezeichneten Pfeil. Ein orangefarbener Glanz streicht bei 14,6 s über den Namen. Halte bis zum Ende, voll sichtbar und lesbar bis zum letzten Frame.
Palette:
Dunkle Szenen: fast Schwarz #0D0B1E und tiefes Tintenblau #1C0B5D, mit einem weichen tintenblauen Glühen in der Mitte und einem schwachen 48-px-Punktraster über allem.
Helle Seite: #FAF9FF mit einem Lavendelton #F0EDFF und einer horizontalen Vignette, die den linken und rechten Rand auf etwa #B6B1C6 abdunkelt.
Hauptakzent: Pink #FB2D89 für Pillen, Buttons, Hervorhebungen und den Cursor.
Zweiter Akzent: Orange #FE9117 für das hervorgehobene Wort jeder Schlagzeile.
Neutrale Töne: Weiß #FFFFFF, gedämpfter Text #6B6385 auf Hell und #8E87A6 auf Dunkel, Linien #E9E4F2.
Details: Türkis #2DD4B0 für Erfolg; Gelb #FFD23F und Violett #7C6CF2 nur für kleine Details.
Schrift: Geist für alles Große. Schlagzeilen in Stärke 800 mit enger Laufweite von etwa -0,023em; die Wortmarke der Endkarte in Stärke 500. Geist Mono für Labels, Chips, Code und das HUD, mit kleinen Versalien-artigen Labels bei weitem Buchstabenabstand von 0,15–0,35em.
HUD über den Szenen 1–6:
Dünne Eckklammern an den vier Ecken.
Oben links: ein pinker Punkt mit dem App-Namen oder einem Claim.
Oben rechts: ein laufender Timecode (HH:MM:SS:FF bei 60 fps).
Unten links: der aktuelle Abschnitt ("01 OPEN APP", "02 DESCRIBE THE VIDEO", "03 LIVE PREVIEW", "04 NO KEYFRAMES", "05 TRY IT FREE").
Unten rechts: "VERTICAL · HORIZONTAL · SQUARE".
Aller HUD-Text ist 14 px Mono in einer gedämpften Farbe, die auf der hellen Seite dunkel und auf der pinken Seite weiß wird. Das HUD blendet aus, wenn die Endkarte ankommt.
Schlagzeilen steigen Buchstabe für Buchstabe in ihre Zeile auf. Jeder Buchstabe wird von der Zeile beschnitten und steigt von unten auf (0,15 s, Ease-out im Stil von power3), wobei die Staffelung so verteilt ist, dass die ganze Zeile unabhängig von ihrer Länge in etwa 0,4 s landet. Ausgetauschte Wörter verlassen die Zeile Buchstabe für Buchstabe nach oben durch die Oberkante, während das neue Wort an seiner Stelle aufsteigt. Fließtext und Claims steigen Wort für Wort auf. Mono-Kicker, Labels und Adressen werden aus zufälligen Zeichen entschlüsselt. Pillen und Buttons poppen mit leichtem Überschwingen auf (Back-out-Ease). Code tippt mit etwa 100 Zeichen pro Sekunde und einem pinken Caret. Nutze Bewegungsunschärfe bei den schnellsten Bewegungen: dem Öffnen der Seite, den rotierenden Zahlen, dem Zusammenquetschen zur Linie und dem Hereinfahren des Icons. Halte auf stehenden Szenen einen langsamen Push-in, damit das Bild bis zum Halten der Endkarte nie statisch ist.
Ein originaler, energiegeladener Instrumental-House-Track mit exakt 128 BPM, exakt 15 s lang, mit Kicks auf dem Beat-Raster. Er beginnt mit einem gedämpften, tiefpassgefilterten ersten Takt und einem Weißes-Rauschen-Riser. Der volle Beat setzt exakt beim Blitz bei 1,875 s mit einem Impact und einem tiefen Sub-Boom ein. Von da an ist es ein gleichmäßiger Four-on-the-Floor-Groove mit Claps, Hi-Hats, pulsierendem Bass und hellen Synth-Akkorden, ohne Drops oder Lücken im Pegel an irgendeiner Stelle. Kurz vor der Endkarte geht der Track für einen halben Takt in einen tiefpassgefilterten Klang über (ein Filter-Build), anstatt abzubrechen. Ein letzter Boom und Splash trifft bei 13,125 s, gefolgt vom kurzen eigenen Outro des Tracks bis 15 s.
Die Motion-Design-Kniffe, aus denen das Video besteht, jeweils mit eigenständigem Code, den du im Browser öffnen oder deinem Agenten geben kannst.
Jedes Zeichen einer fetten Headline sitzt in einer eigenen Clip-Box in Zeilenhöhe und steigt von unten hinein (0,15 s, power3.out). Der Stagger ist auf eine feste Spanne verteilt (etwa 0,26 s für die ganze Headline), sodass ein langes Wort genauso lange braucht wie ein kurzes. Beim Tausch des letzten Worts verlassen dessen Buchstaben die Zeile innerhalb von 0,1 s (power2.in) nach oben, während das Ersatzwort, in der Akzentfarbe an derselben Stelle gestapelt, in etwa 0,13 s hineinsteigt; das erste Wort bewegt sich nie.
Wann einsetzen Ein prägnantes Statement, das ein Wort im Takt ohne Schnitt wechselt.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maskierter Zeichenaufstieg mit Wortwechsel</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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#kicker { position: absolute; left: 0; right: 0; top: 398px; text-align: center; font: 400 23px/1 "Geist Mono", monospace; letter-spacing: 0.15em; color: #8e87a6; white-space: pre; }
#title { position: absolute; left: 409px; top: 452px; white-space: pre; font: 800 155px/1.2 "Geist", sans-serif; letter-spacing: -0.023em; }
#w2 { position: relative; display: inline-block; }
#wb { position: absolute; left: 0; top: 0; color: #FE9117; }
.m { display: inline-block; clip-path: inset(-6% -12% 0 -12%); } /* the line is the mask */
.c { display: inline-block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
<div id="kicker" class="clip" data-start="0" data-duration="4">TELL THE CHAT WHAT TO SHOW</div>
<div id="title" class="clip" data-start="0" data-duration="4"><span id="w1">No </span><span id="w2"><span id="wa">keyframes.</span><span id="wb">timeline.</span></span></div>
</div>
<script>
// Split a word into masked characters: the outer span clips on the line, the inner one moves.
function split(el) {
const text = el.textContent; el.textContent = ""; const out = [];
for (const ch of text) {
const m = document.createElement("span"); m.className = "m";
const c = document.createElement("span"); c.className = "c"; c.textContent = ch;
m.appendChild(c); el.appendChild(m); if (ch !== " ") out.push(c);
}
return out;
}
const tl = gsap.timeline({ paused: true });
const w1 = split(document.getElementById("w1")), wa = split(document.getElementById("wa")), wb = split(document.getElementById("wb"));
const IN = 0.15, OUT = 0.11; // rise and exit durations of one letter
const spread = (n, total) => total / Math.max(1, n - 1); // stagger that fits n letters into `total` seconds
gsap.set(wb, { yPercent: 105 });
const first = w1.concat(wa), last = w1.concat(wb);
first.forEach((c, i) => tl.fromTo(c, { yPercent: 105 }, { yPercent: 0, duration: IN, ease: "power3.out", immediateRender: true }, 0.1 + i * spread(first.length, 0.264)));
wa.forEach((c, i) => tl.to(c, { yPercent: -105, duration: OUT, ease: "power2.in" }, 1.6 + i * spread(wa.length, 0.1))); // the old word leaves upward
wb.forEach((c, i) => tl.to(c, { yPercent: 0, duration: IN, ease: "power3.out" }, 1.68 + i * spread(wb.length, 0.132))); // the new word rises in its place
last.forEach((c, i) => tl.to(c, { yPercent: -105, duration: OUT, ease: "power2.in" }, 3.3 + i * spread(last.length, 0.144)));
tl.fromTo("#kicker", { opacity: 0 }, { opacity: 1, duration: 0.25 }, 0.4);
tl.to("#kicker", { opacity: 0, duration: 0.1 }, 3.25);
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 kleines gekipptes Quadrat kommt aus dem vorigen Shot mit etwa 45 px, wächst in einer Viertelsekunde auf etwa 215 px an, richtet sich auf, läuft dann den Buchstaben voraus, während diese in die Zeile steigen, wird dabei kleiner und setzt sich als Schlusspunkt der Headline, wobei es die Akzentfarbe mit Glow annimmt. Größe, Winkel und Pfad sind Keyframes, die aus der Zeit der Timeline gelesen werden.
Wann einsetzen Eine Titeleinblendung, die ein Objekt aus dem vorigen Shot in die Schrift trägt.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quadratischer Cursor, der eine Headline tippt und als deren Punkt landet</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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#title { position: absolute; left: 124px; top: 337px; white-space: pre; font: 800 311px/1.2 "Geist", sans-serif; letter-spacing: -0.022em; }
.m { display: inline-block; clip-path: inset(-6% -12% 0 -12%); }
.c { display: inline-block; }
#sq { position: absolute; left: 910px; top: 490px; width: 100px; height: 100px; border-radius: 22px;
background: linear-gradient(140deg, #ffc27a 0%, #FE9117 55%, #fb5a5f 100%); box-shadow: 0 0 40px rgba(254, 145, 23, 0.5); }
#sqd { position: absolute; inset: 0; border-radius: inherit; background: #FB2D89; opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1920" data-height="1080">
<div id="title" class="clip" data-start="0" data-duration="3.5">OPEN APP</div>
<div id="sq" class="clip" data-start="0" data-duration="3.5"><div id="sqd"></div></div>
</div>
<script>
const tl = gsap.timeline({ paused: true });
const title = document.getElementById("title"), sq = document.getElementById("sq");
const text = title.textContent; title.textContent = ""; const chars = [];
for (const ch of text) { const m = document.createElement("span"); m.className = "m"; const c = document.createElement("span"); c.className = "c"; c.textContent = ch; m.appendChild(c); title.appendChild(m); if (ch !== " ") chars.push(c); }
// Letters rise one after another (a short pause on the space).
[0.37, 0.4, 0.43, 0.46, 0.53, 0.56, 0.59].forEach((t, i) => tl.fromTo(chars[i], { yPercent: 105 }, { yPercent: 0, duration: 0.16, ease: "power3.out", immediateRender: true }, t));
// The square (100 px box) by keyframes [seconds, value]: it arrives at 45 px and tilted, swells to about 215 px,
// straightens, then runs ahead of the letters shrinking until it rests as the full stop (centre x, y in px).
const K = { s: [[0.1, 0.45], [0.17, 1.1], [0.22, 1.75], [0.27, 2.15], [0.32, 2.15], [0.37, 2.1], [0.42, 1.73], [0.52, 1.1], [0.57, 0.77], [0.67, 0.61]],
r: [[0.1, 15], [0.17, 4], [0.22, -5], [0.27, -6], [0.32, -2], [0.37, 0]],
x: [[0.37, 960], [0.42, 1032], [0.47, 1240], [0.52, 1420], [0.57, 1588], [0.62, 1700], [0.67, 1755]],
y: [[0.37, 535], [0.42, 518], [0.52, 530], [0.57, 545], [0.62, 580], [0.67, 600]] };
const at = (keys, t) => { if (t <= keys[0][0]) return keys[0][1]; for (let i = 1; i < keys.length; i++) if (t <= keys[i][0]) { const [a, va] = keys[i - 1], [b, vb] = keys[i]; return va + (vb - va) * (t - a) / (b - a); } return keys[keys.length - 1][1]; };
const draw = (t) => gsap.set(sq, { scale: at(K.s, t), rotation: at(K.r, t), x: at(K.x, t) - 960, y: at(K.y, t) - 540 });
tl.to({}, { duration: 3.5, onUpdate: () => draw(tl.time()) }, 0);
draw(0);
// Landed: the cursor becomes the full stop in the accent colour.
tl.to("#sqd", { opacity: 1, duration: 0.25, ease: "power1.inOut" }, 0.52);
tl.to(sq, { boxShadow: "0 0 70px rgba(251, 45, 137, 0.6)", duration: 0.3 }, 0.52);
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 skaliert den Titel um die Punze seines ersten O auf logarithmisch verteilten Keyframes (1,07 zu Beginn des Sprungs, 3 nach 0,3 s, 22 nach 0,5 s), während eine power2.out-Bewegung diese Punze in die Bildmitte bringt; der Hintergrund des Titels erhält ein elliptisches Maskenloch, das der Punze folgt, sodass die darunterliegende nächste Szene durch den Buchstaben zu sehen ist und das Bild füllt, wenn der Rand des O vorbeifliegt.
Wann einsetzen Der Übergang von einem großen Wort zu einem Produkt-Shot oder einem neuen Abschnitt in einer durchgehenden Bewegung.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sprung 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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#next { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 58% at 50% 54%, #22124a 0%, #100c26 62%, #090714 100%); }
#card { position: absolute; left: 679px; top: 399px; width: 562px; height: 351px; border-radius: 22px; border: 2px solid #FB2D89; background: #1a1340;
display: flex; flex-wrap: wrap; align-content: flex-start; gap: 16px; padding: 40px; }
#card b { width: 50px; height: 50px; border-radius: 12px; background: #1C0B5D; box-shadow: inset 0 0 0 3px #FB2D89; }
#card span { font: 700 45px/50px "Geist", sans-serif; }
#card i { width: 233px; height: 64px; border-radius: 10px; background: #FB2D89; }
#back { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#cam { position: absolute; inset: 0; }
#title { position: absolute; left: 124px; top: 337px; white-space: pre; font: 800 311px/1.2 "Geist", sans-serif; letter-spacing: -0.022em; color: #fff; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
<div id="next" class="clip" data-start="0" data-duration="3"><div id="card"><b></b><span>"Next scene"</span><i></i><i></i></div></div>
<div id="back" class="clip" data-start="0" data-duration="3"></div>
<div id="cam" class="clip" data-start="0" data-duration="3"><div id="title">OPEN APP</div></div>
</div>
<script>
// The camera dives into the counter of the first letter "O": the title scales up about the counter while the
// counter slides to the frame centre; the background gets an elliptical hole that follows the counter, so the
// next scene (underneath) shows through it.
const tl = gsap.timeline({ paused: true });
const F = 311; // font size of the title
const title = document.getElementById("title"), cam = document.getElementById("cam"), back = document.getElementById("back");
// Counter of Geist 800 "O" in its line box (line-height 1.2), as fractions of the font size.
const ocx = title.offsetLeft + 0.3935 * F, ocy = title.offsetTop + 0.5995 * F, RX = 0.1735 * F, RY = 0.2285 * F;
gsap.set(cam, { transformOrigin: `${ocx}px ${ocy}px` });
// Scale keyframes [seconds, scale], interpolated in log space: slow, then exploding past the camera.
const DIVE = [[0.6, 1.075], [0.683, 1.2], [0.733, 1.4], [0.783, 1.6], [0.833, 1.9], [0.867, 2.3], [0.917, 3], [0.967, 4.5], [1.017, 8], [1.05, 12.5], [1.083, 17], [1.1, 22]];
const scaleAt = (t) => {
if (t <= DIVE[0][0]) return 1 + 0.075 * Math.max(0, t) / DIVE[0][0]; // slow push-in before the dive
for (let i = 1; i < DIVE.length; i++) if (t <= DIVE[i][0]) {
const [a, sa] = DIVE[i - 1], [b, sb] = DIVE[i];
return Math.exp(Math.log(sa) + (Math.log(sb) - Math.log(sa)) * (t - a) / (b - a));
}
return 40;
};
const k = { v: 0 };
tl.to(k, { v: 1, duration: 0.32, ease: "power2.out" }, 0.6); // the counter travels to the centre
gsap.set("#card", { scale: 0.86 });
tl.to("#card", { scale: 1, duration: 0.5, ease: "power2.out" }, 1.02);
const draw = (t) => {
const s = scaleAt(t), cx = ocx + (960 - ocx) * k.v, cy = ocy + (540 - ocy) * k.v;
gsap.set(cam, { scale: s, x: cx - ocx, y: cy - ocy, opacity: t > 1.1 ? 0 : 1 });
const hole = t >= 0.68 ? `radial-gradient(ellipse ${RX * 1.1 * s}px ${RY * 1.07 * s}px at ${cx}px ${cy}px, transparent 99%, #000 100%)` : "none";
back.style.webkitMaskImage = back.style.maskImage = hole;
back.style.opacity = t > 1.1 ? 0 : 1;
};
tl.to({}, { duration: 3, onUpdate: () => draw(tl.time()) }, 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>
Neun gleich breite Spalten enthüllen die nächste Szene abwechselnd von oben und von unten, starten im Abstand von 20–70 ms und brauchen je 0,15 s (power2.inOut); jede Spalte ist eine CSS-Maskenebene mit 36 px weicher Kante, und ein dünner leuchtender Balken in der Akzentfarbe läuft an ihrer Vorderkante mit.
Wann einsetzen Ein harter Stimmungswechsel (hell zu dunkel), der sich trotzdem mechanisch und im Takt anfühlt.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spaltenwisch mit leuchtenden Vorderkanten</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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#from { position: absolute; inset: 0; background: linear-gradient(90deg, #b6b1c6 0%, #e2ddef 20%, #FAF9FF 50%, #e0dbee 78%, #b6b1c6 100%); color: #0D0B1E; }
#to { position: absolute; inset: 0; background: radial-gradient(ellipse 48% 58% at 52% 56%, #22124a 0%, #100c26 64%, #090714 100%); color: #fff; }
.word { position: absolute; left: 0; right: 0; top: 470px; text-align: center; font: 800 120px/1 "Geist", sans-serif; letter-spacing: -0.025em; }
#bars { position: absolute; inset: 0; }
.bar { position: absolute; height: 7px; background: #FB2D89; box-shadow: 0 0 18px 4px rgba(251, 45, 137, 0.7); opacity: 0; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.5" data-width="1920" data-height="1080">
<div id="from" class="clip" data-start="0" data-duration="2.5"><div class="word">"Light scene"</div></div>
<div id="to" class="clip" data-start="0" data-duration="2.5"><div class="word">"Dark scene"</div></div>
<div id="bars" class="clip" data-start="0" data-duration="2.5"></div>
</div>
<script>
// Nine columns reveal the next scene, each sliding in from the top or the bottom with a soft edge and a glowing bar
// at its leading edge. One CSS mask layer per column, sized and placed from the timeline's time.
const tl = gsap.timeline({ paused: true });
const COLS = [[0, 0.5, 1], [1, 0.53, -1], [2, 0.55, 1], [3, 0.575, -1], [4, 0.595, 1], [5, 0.665, -1], [6, 0.62, 1], [7, 0.64, -1], [8, 0.685, 1]]; // [column, start s, from top 1 / bottom -1]
const CW = 1920 / 9, CD = 0.15, FEATHER = 36;
const to = document.getElementById("to"), barsEl = document.getElementById("bars");
const bars = COLS.map(([i]) => { const b = document.createElement("div"); b.className = "bar"; b.style.left = i * CW + "px"; b.style.width = Math.ceil(CW) + "px"; barsEl.appendChild(b); return b; });
const ease = gsap.parseEase("power2.inOut");
const draw = (t) => {
const imgs = [], sizes = [], poss = [];
COLS.forEach(([i, t0, dir], k) => {
const p = ease(Math.min(1, Math.max(0, (t - t0) / CD))), h = Math.round(p * 1110);
imgs.push(`linear-gradient(${dir > 0 ? 180 : 0}deg, #000 calc(100% - ${FEATHER}px), transparent)`);
sizes.push(`${Math.ceil(CW) + 1}px ${h}px`);
poss.push(`${Math.floor(i * CW)}px ${dir > 0 ? 0 : 1080 - h}px`);
bars[k].style.opacity = p > 0 && p < 1 ? 1 : 0;
bars[k].style.top = (dir > 0 ? h - 26 : 1080 - h + 19) + "px";
});
const m = to.style;
m.webkitMaskImage = m.maskImage = imgs.join(",");
m.webkitMaskSize = m.maskSize = sizes.join(",");
m.webkitMaskPosition = m.maskPosition = poss.join(",");
m.webkitMaskRepeat = m.maskRepeat = "no-repeat";
};
tl.to({}, { duration: 2.5, onUpdate: () => draw(tl.time()) }, 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>
Die nächste Szene wird von einem Kreis maskiert, der auf einem kleinen Badge der letzten Szene zentriert ist, mit weicher 26-px-Kante und einem leuchtenden Rand knapp außerhalb; der Radius folgt Keyframes (etwa 130 und 190 px in den ersten zwei Frames, dann in weiteren 0,1 s über die ferne Ecke hinaus), sodass die neue Farbe aus dem Badge herausbricht und der neue Inhalt beim Eintreffen hineinsteigt.
Wann einsetzen Einen kleinen Erfolgsmoment in den nächsten Vollbildabschnitt verwandeln.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kreisausbruch aus einem Status-Badge</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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#badge { position: absolute; left: 1636px; top: 732px; width: 137px; height: 42px; border-radius: 21px; background: #2DD4B0; color: #05302a;
display: flex; align-items: center; justify-content: center; gap: 10px; font: 700 20px/1 "Geist Mono", monospace; }
#badge svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; }
#rim { position: absolute; left: 1705px; top: 753px; width: 0; height: 0; border-radius: 50%; box-shadow: 0 0 0 10px rgba(255, 140, 195, 0.35), 0 0 40px 18px rgba(255, 90, 160, 0.35); }
#next { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 33% 40%, #ff4f9c 0%, #FB2D89 30%, #e81f7b 55%, #cc176b 80%, #b0125d 100%); }
.word { position: absolute; left: 127px; top: 152px; font: 800 243px/1.08 "Geist", sans-serif; letter-spacing: -0.022em; color: #fff; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="2.5" data-width="1920" data-height="1080">
<div id="badge" class="clip" data-start="0" data-duration="2.5"><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7" /></svg>LIVE</div>
<div id="next" class="clip" data-start="0" data-duration="2.5"><div class="word">"01"</div></div>
<div id="rim" class="clip" data-start="0" data-duration="2.5"></div>
</div>
<script>
// The next scene bursts out of the status badge as a soft-edged circle with a glowing rim; its radius follows
// keyframes (slow for two frames, then racing past the corners), and the new content rises in as it lands.
const tl = gsap.timeline({ paused: true });
const next = document.getElementById("next"), rim = document.getElementById("rim");
const CX = 1705, CY = 753; // centre of the badge
const R = [[1.0, 0], [1.017, 127], [1.05, 191], [1.067, 545], [1.1, 737], [1.117, 1330], [1.15, 1580], [1.167, 2000]]; // [s, radius px]
const radius = (t) => { if (t <= R[0][0]) return 0; for (let i = 1; i < R.length; i++) if (t <= R[i][0]) { const [a, ra] = R[i - 1], [b, rb] = R[i]; return ra + (rb - ra) * (t - a) / (b - a); } return 2000; };
tl.fromTo("#badge", { scale: 0 }, { scale: 1, duration: 0.16, ease: "back.out(2.4)", immediateRender: true }, 0.2);
tl.fromTo(".word", { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 0.24, ease: "power3.out", immediateRender: true }, 1.17);
const draw = (t) => {
const r = radius(t);
const m = r >= 1999 ? "none" : `radial-gradient(circle at ${CX}px ${CY}px, #000 ${Math.max(0, r - 26)}px, transparent ${r}px)`;
next.style.webkitMaskImage = next.style.maskImage = m;
gsap.set(rim, { width: 2 * r, height: 2 * r, x: -r, y: -r, opacity: r > 0 && r < 1999 ? 1 : 0 });
};
tl.to({}, { duration: 2.5, onUpdate: () => draw(tl.time()) }, 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>
Jede Ziffer ist eine vertikale Walze aus 10+ Ziffern in einer Spalte, so breit wie die endgültige Ziffer; die Walze scrollt in etwa 0,25 s mit power3.out nach oben zu ihrem Wert, mit einem Blur, der sich beim Abbremsen auflöst, wobei spätere Ziffern etwas länger drehen, sodass sich die Zahl von links nach rechts setzt; eine feine Linie unter der Reihe zeichnet sich dabei mit.
Wann einsetzen Große Zahlen, Schritte oder Preise, die mit Energie landen sollen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spielautomaten-Zahlenwalzen</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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#root { background: radial-gradient(ellipse 60% 70% at 33% 40%, #ff4f9c 0%, #FB2D89 30%, #e81f7b 55%, #cc176b 80%, #b0125d 100%); }
.dv { position: absolute; left: 127px; width: 1666px; height: 2px; background: rgba(255, 255, 255, 0.34); transform-origin: 0 50%; }
.num { position: absolute; left: 127px; display: flex; font: 800 243px/1 "Geist", sans-serif; letter-spacing: -0.022em; color: #fff; }
.col { position: relative; display: inline-block; overflow: hidden; height: 1.08em; }
.reel { display: block; }
.reel span { display: block; height: 1.08em; line-height: 1.08em; text-align: center; margin: 0 -0.2em; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
<div class="dv clip" id="d0" data-start="0" data-duration="3" style="top: 147px;"></div>
<div class="dv clip" id="d1" data-start="0" data-duration="3" style="top: 421px;"></div>
<div class="dv clip" id="d2" data-start="0" data-duration="3" style="top: 695px;"></div>
<div class="num clip" id="n0" data-start="0" data-duration="3" style="top: 152px;"></div>
<div class="num clip" id="n1" data-start="0" data-duration="3" style="top: 426px;"></div>
<div class="num clip" id="n2" data-start="0" data-duration="3" style="top: 700px;"></div>
</div>
<script>
// Each digit is a reel of digits that scrolls up and lands on its value, blurred while fast; later digits spin
// longer, so the number settles left to right. The column is as wide as the landed digit.
const tl = gsap.timeline({ paused: true });
const NUMS = [["01", 0.3], ["02", 0.5], ["03", 0.77]]; // [value, starts at s]
NUMS.forEach(([str, t0], ni) => {
const el = document.getElementById("n" + ni);
[...str].forEach((ch, di) => {
const col = document.createElement("span"); col.className = "col";
const reel = document.createElement("span"); reel.className = "reel";
const spins = 10 + di * 3, target = +ch;
for (let k = 0; k <= spins; k++) { const s = document.createElement("span"); s.textContent = String((target - spins + k + 100) % 10); reel.appendChild(s); }
col.appendChild(reel); el.appendChild(col);
const probe = document.createElement("span"); probe.textContent = ch; probe.style.cssText = "display:inline-block;position:absolute;visibility:hidden"; el.appendChild(probe);
col.style.width = probe.getBoundingClientRect().width + "px"; probe.remove();
const h = 100 / (spins + 1), dur = 0.24 + di * 0.035;
tl.fromTo(reel, { yPercent: 0, filter: "blur(6px)" }, { yPercent: -h * spins, filter: "blur(0px)", duration: dur, ease: "power3.out", immediateRender: true }, t0 + di * 0.02);
tl.fromTo(col, { opacity: 0 }, { opacity: 1, duration: 0.05, immediateRender: true }, t0 + di * 0.02);
});
tl.fromTo("#d" + ni, { scaleX: 0 }, { scaleX: 1, duration: 0.3, ease: "power2.out", immediateRender: true }, t0 - 0.02);
});
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>
Gut zwanzig beschriftete Chips sitzen an festen Positionen mit leichtem Roll und 3D-Neigung, einige unscharf, als lägen sie außerhalb des Fokus; sie werden nacheinander scharf (opacity, blur von 6 px bis scharf, scale von 0,94 auf 1, 0,22 s) und driften ein paar Pixel; zum Abgang kippt jeder hart (0,14 s) und fliegt entlang seiner Linie aus der Mitte an der Kamera vorbei, mit translateZ in einer Perspektiv-Box (0,22 s, power1.in), bis etwa 10 px unscharf wie ein Streifen, während ein kleines Kernquadrat in der Mitte auf etwa 42 px wächst.
Wann einsetzen „Alles auf einmal“ rund um eine Headline zeigen und dann die Bühne mit Tempo räumen.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chip-Wolke in der Tiefe mit Warp-Flug</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=Geist:[email protected]&family=Geist+Mono:[email protected]&display=block");
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 1920px; height: 1080px; overflow: hidden; background: #0D0B1E; }
#root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: "Geist", sans-serif; color: #fff;
background: radial-gradient(ellipse 62% 70% at 50% 50%, #16102e 0%, #0e0b20 45%, #090714 100%); }
#root::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(240, 237, 255, 0.07) 1.3px, transparent 1.9px); background-size: 48px 48px; }
#space { position: absolute; inset: 0; perspective: 1000px; perspective-origin: 960px 540px; }
.chip { position: absolute; display: flex; align-items: center; gap: 13px; height: 44px; padding: 0 18px 0 16px; border-radius: 10px; white-space: pre;
font: 500 21px/1 "Geist Mono", monospace; color: #E3DEF0; background: rgba(22, 18, 46, 0.86); border: 1.5px solid rgba(233, 228, 242, 0.14); }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: #6B6385; }
.chip.hl { color: #fff; background: rgba(251, 45, 137, 0.13); border-color: #FB2D89; }
.chip.hl i { background: #FB2D89; }
#core { position: absolute; left: 955px; top: 535px; width: 10px; height: 10px; border-radius: 22%; background: linear-gradient(135deg, #FE9117, #FB2D89); box-shadow: 0 0 18px rgba(251, 45, 137, 0.9); }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3" data-width="1920" data-height="1080">
<div id="space" class="clip" data-start="0" data-duration="3"></div>
<div id="core" class="clip" data-start="0" data-duration="3"></div>
</div>
<script>
// Labels float at different depths (roll, small 3D tilt, depth-of-field blur), focus in one by one and drift;
// then each tilts hard and flies past the camera along its line from the centre (translateZ in a perspective box).
const tl = gsap.timeline({ paused: true });
const CHIPS = [["\"Tell the chat what to show\"", 907, 340, 3, 1, 0], ["\"Kinetic type\"", 1349, 740, 2, 0, 0], ["\"Live preview\"", 225, 598, 2, 0, 0.4],
["\"Describe your idea\"", 1213, 931, 4, 1, 0], ["\"MP4 export\"", 1700, 590, -3, 0, 1.6], ["\"Shapes\"", 571, 853, 0, 0, 0], ["\"3D effects\"", 1677, 652, -3, 0, 1.4],
["\"Fonts for every script\"", 650, 940, 2, 0, 0], ["\"Music and sound effects\"", 1432, 167, -2, 0, 0], ["\"Pick a template\"", 1128, 828, 0, 0, 0],
["\"Edit in words\"", 286, 873, 4, 0, 0.6], ["\"Your own footage\"", 380, 757, 2, 0, 0.6]]; // [text, x, y, roll, highlighted, blur]
let seed = 11; const rnd = () => { seed = (seed * 16807) % 2147483647; return seed / 2147483647; }; // seeded
const space = document.getElementById("space");
CHIPS.forEach(([text, x, y, roll, hl, blur], i) => {
const el = document.createElement("div"); el.className = "chip" + (hl ? " hl" : ""); el.innerHTML = "<i></i>" + text.replace(/"/g, "");
el.style.left = x + "px"; el.style.top = y + "px"; space.appendChild(el);
const at = 0.08 + i * 0.07;
gsap.set(el, { xPercent: -50, yPercent: -50, rotation: roll, rotationY: (rnd() - 0.5) * 16, rotationX: (rnd() - 0.5) * 12, opacity: 0, filter: `blur(${blur + 6}px)`, scale: 0.94 });
tl.to(el, { opacity: 1, filter: `blur(${blur}px)`, scale: 1, duration: 0.22, ease: "power2.out" }, at); // focus pull in
tl.to(el, { x: (rnd() - 0.5) * 24, y: (rnd() - 0.5) * 22, duration: 2.0 - at, ease: "none" }, at); // drift
const w = 2.0 + rnd() * 0.04;
tl.to(el, { rotationX: (rnd() - 0.5) * 120, rotationY: (rnd() - 0.5) * 130, duration: 0.14, ease: "power2.out" }, w); // tilt
tl.to(el, { z: 860 + rnd() * 100, filter: `blur(${blur + 10}px)`, duration: 0.22, ease: "power1.in" }, w); // fly past, blurring like a streak
tl.to(el, { opacity: 0, duration: 0.06 }, w + 0.17);
});
gsap.set("#core", { scale: 0, rotation: 45 });
tl.to("#core", { scale: 1, duration: 0.1, ease: "power2.out" }, 1.85);
tl.to("#core", { scale: 2.6, rotation: 15, duration: 0.33, ease: "power1.out" }, 1.95);
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>
3-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>
9-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