dein KI-Motion-Designer

DE

App öffnen beta

Simple Motion

Hypnotisches Eye-Dive-Showreel im Neon-Synthwave

Ein komplett gezeichnetes psychedelisches Reel: Ein Auge öffnet sich, die Kamera taucht durch die Pupille in einen Augentunnel, einen Chrom-Blob und eine Spirale und landet auf einem Titel.

Veröffentlicht 10. November 2026

Prompt verwenden

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

Mit deinem Agenten nutzenIm Agenten

Konzept

Erstelle ein 20-sekündiges, psychedelisches, hypnotisches Motion-Graphics-Showreel, 16:9 bei 1920x1080 und 60 fps. Alles ist gezeichnet und generiert: prozedurale Muster und 3D-gerenderte Formen, kein Filmmaterial und keine Fotos. Schneide es zu einem Neon-Synthwave-Track mit 120 BPM. Die Idee: Ein Auge öffnet sich aus einer einzigen Linie, und die Kamera taucht immer weiter hindurch in immer seltsamere Welten, bevor sie auf einem Titel landet. Jedes Bild wird von der Zeit gesteuert. Abschnitte wechseln auf Taktgrenzen (alle 2 s) hinter weißen Blitzen, und Helligkeitspulse auf den Schlägen lassen das Bild atmen. Der Look ist tiefes Tintenblau und Fast-Schwarz mit Neonpink, Orange, Violett, Türkis und Gelb, weichem Bloom, leichter chromatischer Aberration, feinem Korn und einer Vignette, mit einem dünnen technischen HUD, das alles einrahmt. Alle zitierten Wörter sind Beispiele, die du durch deine ersetzt; halte ihre Länge ähnlich, damit das Layout hält. Vermeide Filmmaterial und Stockbilder, flache untexturierte Flächen, reines Schwarz (Dunkles nie unter #0D0B1E), übersättigte Farben und echte Namen oder Marken auf dem Bildschirm.

Ablauf

0,0–4,0 s, das Auge. Schwarz, dann erscheint bei 0,3 s eine dünne leuchtende Wimpernlinie. Das Auge ist eine spitze Mandel: die Linsenform zwischen zwei sich überlappenden Kreisen, etwa 0,55 der Bildbreite. Der gesamte Rahmen darum füllt sich mit seinen Konturlinien, den Isolinien derselben Zwei-Kreise-Form in logarithmischen Schritten (jeder Abstand etwa 13 % breiter als der vorige). Sie fließen langsam nach außen und verblassen mit der Entfernung: blasses Lavendel, Orange und Türkis nahe am Auge, weiter außen Pink, über tintenblauen Bändern. Von 0,3 bis 0,85 s ist das Auge ein Schlitz. Von 0,85 bis 1,33 s öffnen sich die Lider (power2.out), während das Auge von 86 % auf volle Größe wächst. Die Iris ist faserig, in Bändern aus Orange, Pfirsich, Minze und Violett, mit pinkem Randring, türkisem Glühen und einem ringförmigen Glanzlicht oben links; die Lider haben einen weichen weißen Innenrand. Beat-Wellen laufen bei 1,5, 1,75, 2,5 und 2,75 s durch die Linien. Eine zentrierte Bildunterschrift in kleiner, gesperrter Monospace-Schrift („YOUR LINE OF TWENTY-SIX LETTERS“) wird ab 1,4 s mit etwa 45 Buchstaben pro Sekunde entschlüsselt und zerfällt von rechts bei 2,8–3,1 s. Ab 2,75 s weitet sich die Pupille und zeigt die nächste Szene, die bereits in ihr läuft, während die Irisbänder zu Violett und Gelb wechseln. Von 3,42 bis 3,98 s fährt die Kamera in die Pupille, bis die innere Szene den Rahmen im Verhältnis 1:1 füllt.
4,0–8,0 s, der Tunnel. Schnitt auf einen weißen Blitz mit radialen Strahlen. Das ist ein perspektivischer Tunnel aus Ringen, so verteilt, dass der inverse Radius pro Ring um 0,75 wächst. Jeder Ring trägt 18 Mandelaugen mit türkisen Umrissen, pinken und violetten Iriden und einem weißen Glanzlicht. Abwechselnde Ringe sitzen eine halbe Zelle versetzt und drehen gegenläufig. Die Ringe fliegen mit etwa 11 Ringen pro Sekunde nach außen, mit einem Schub auf jedem Schlag, und die fernen Ringe schmelzen in einen Tintennebel um einen weißen Kern. Auf jedem Schlag verlässt ein leuchtender Ring den Kern und wächst, nacheinander weiß, pink, dann türkis. Von 6,05 bis 6,45 s morphen die Augen zu einem polaren Schachbrett, dann zu einem Sonnenstrahl-Burst aus 36 langsam drehenden Strahlen in gedämpften Regenbogenfarben, mit einem hellen Ring um die Mitte, der nach 7,0 s anschwillt. Von 7,45 bis 7,8 s blitzt das Schachbrett zurück, und von 7,72 bis 7,97 s wird alles weiß.
8,0–11,33 s, der Chrom-Blob. Das Weiß blendet über 0,5 s aus und gibt ein schillerndes Chrom-Metaball über dunklen konzentrischen Wellen frei. Es besteht aus sechs Kugeln in einer glatten Vereinigung: ein dunkler Körper mit dünnen Ölfilm-Konturbändern in Türkis und Pink, einem pinken Randlicht und scharfen weißen Spitzlichtern. Er dreht sich und morpht. Eine vertikale Kette sammelt sich zu einem Klumpen, zwei Tröpfchen spalten sich bei 9,1–9,5 s ab, und er knüllt sich bei 9,5–9,9 s zusammen. Ab 10,0 s wird das Bild zu einem Kaleidoskop, das durch 4, 6, 3, 8 und dann 10 Spiegelfaltungen schaltet, und ein blasser Bogen streicht bei 10,0–10,25 s nach außen.
11,33–14,0 s, die Spirale. Ein Glitch-Blitz, dann zwölf logarithmische Spiralarme aus tropfenförmigen Zellen. Jede Zelle ist entlang ihres Arms 1,5-mal so groß wie die vorige, und die Arme drehen sich nach außen gegen den Uhrzeigersinn. Die Zellen haben doppelte lavendelfarbene Umrisse und enthalten entweder eine Iris (türkis, pink oder orange) oder eine verschachtelte Verlaufsraute (pink oder violett). Dünne Goldlinien zeichnen die Arme und Ringe nach, und im Zentrum glüht ein weißer Kern. Die Spirale zoomt mit etwa 1 Log-Einheit pro Sekunde zur Mitte und dreht sich langsam; beide Bewegungen bekommen auf jedem Schlag einen Schub, mit einem Helligkeitspuls auf jedem Schlag. Von 13,82 bis 14,0 s wächst ein weißer Bloom aus der Mitte und füllt den Rahmen.
14,0–15,5 s, der Kugelraum. Das Weiß blendet über 0,7 s in einen 3D-Raum aus. Bögen bestehen aus perlenartigen Kugeln, große schillernde Kugeln säumen die Wände, und flache Bodenscheiben tragen Zickzack-Op-Art-Streifen in Pastell-Regenbogenfarben, alles in tintenviolettem Nebel. Die Kamera fährt vorwärts und neigt sich nach rechts.
15,5–16,0 s, Montage auf Sechzehnteln (Schnitte bei 15,5, 15,633, 15,75 und 15,883 s): eine Iris-Nahaufnahme, die Strahlen, das Kaleidoskop und die Spirale, jeweils mit einem kleinen Blitz.
16,0–18,0 s, das Auge wieder. Ein weißer Blitz mit einer dunklen Scheibe in der Mitte, die in 50 ms auf nichts schrumpft. Die Kamera zieht aus der Pupille, in der der Kugelraum sichtbar ist, bis zum ganzen Auge bei 16,32 s zurück. Jetzt sind die Konturlinien dicke Neonbänder: pink nahe am Auge, dann violett, dann tiefes Tintenblau weiter außen, das bei 16,9–17,8 s türkis wird. Die Iris ist ein pastellfarbener Regenbogenring um eine große dunkle Pupille. Beat-Pulse landen bei 16,5, 17,0 und 17,5 s. Von 17,84 bis 17,98 s schließt sich das Auge mit einem Blinzeln: die Bänder richten sich zu horizontalen Streifen mit einer hellen Linie in der Mitte. Bei 18,0 s kollabiert alles in 50 ms ins Dunkle.
18,1–20,0 s, der Titel. Ein Wort in der breiten schwarzen Grotesk („YOUR WORD“) wird auf etwa 1436 px Breite angepasst und zentriert. Es wischt von links nach rechts mit weicher, unscharfer Kante über 0,52 s ein. Seine Buchstaben sind hell (Lavendel, Minze, dann Blush von links nach rechts) und mit Korn gefüllt, mit einer Rot/Blau-Trennung, die sich von 10 auf 3 px einpendelt, und einem violett, türkis und pink getönten Glühen. Bei 18,62 s blendet darunter ein kursiver Untertitel ein („your short tagline“). Bei 19,1 s wird darüber eine winzige, gesperrte Monospace-Zeile entschlüsselt („( a short call to action )“). Von 19,55 bis 19,95 s löst sich das Wort in Rauschen auf, und das Bild blendet aus.

Bildaufbau

Palette: tiefes Tintenblau #1C0B5D und Fast-Schwarz #0D0B1E für jeden dunklen Bereich (Hintergründe, Bänder, das Weiß des Auges). Die Akzente sind Pink #FB2D89 (Hauptfarbe), Orange #FE9117, Violett #7C6CF2, Türkis #2DD4B0, Gelb #FFD23F und Weiß #FFFFFF. Helles Lavendel #F0EDFF / #FAF9FF für helle Töne und Text, gedämpftes Lavendel #9890B4 für kleinen HUD-Text und #E9E4F2 für Linien. Regenbogenelemente wechseln zwischen Pink, Violett, Türkis, Gelb, Orange.
Grading über allem: weicher Bloom auf hellen Formen (Schwellenwert etwa 0,7), leichte radiale chromatische Aberration zu den Ecken, feines Korn, eine Vignette und leicht gedämpfte Sättigung. Dunkles nie unter #0D0B1E.
Schriften: Unbounded 900 (eine sehr breite schwarze Grotesk) für den Titel, JetBrains Mono 400/700 mit 11–15 px und etwa 0,3 em Laufweite für das HUD und Spectral Italic 400 mit etwa 43 px für den Untertitel.
HUD: Es liegt ab 1,0 s über allem, blendet über 0,5 s ein und bei 19,6–19,9 s aus. Dünne L-förmige Eckklammern sitzen 28 px von jeder Ecke entfernt.

Oben links: ein Name in fetter Monospace („YOUR NAME“) mit einem Claim darunter („YOUR TAGLINE“).
Oben rechts, rechtsbündig: ein Kapitelzähler („01 / 07“) und ein fettes Kapitellabel („FIRST CHAPTER“), die bei jedem Abschnitt wechseln.
Unten links: ein Timecode „TC 00:00:SS:FF“, der Frames bei 60 fps zählt, und „120 BPM · bar.beat.sixteenth“ (zum Beispiel 02.3.3).
Unten rechts: vier 8-px-Quadrate, wobei der aktuelle Schlag weiß leuchtet, und ein kurzer Credit in Fett (zum Beispiel „YOURSITE.COM“).
Eine 1,5 px dicke Fortschrittslinie läuft zwischen den unteren Klammern und füllt sich mit dem Abspielkopf.

Techniken

Text entschlüsseln: Zu Beginn jedes Abschnitts werden Kapitelzähler und Kapitellabel Buchstabe für Buchstabe in 0,38 s entschlüsselt. Jeder Buchstabe läuft durch Zeichen wie # % & = + @ < | / $ mit 30 Wechseln pro Sekunde und löst sich von links nach rechts auf. Die Bildunterschrift und der Call to Action nutzen dieselbe Entschlüsselung, und die Bildunterschrift zerfällt auf dieselbe Weise von rechts.
Abschnittsblitze: Jeder weiße Blitz mit radialen Strahlen klingt ab wie 0.94 / (1 + (t / 0.07)^2.5).
Pupillen-Push (3,42–3,98 s): Der Zoom beschleunigt exponentiell, mit Log-Zoom = 5.5·x² / (x + 0.1) über die Bewegung. Die nächste Szene läuft in der Pupille und endet genau bei 1:1, sodass der Schnitt nahtlos ist. Der Pull-out bei 16,0 s spiegelt ihn.
Beat-Pushes: Tunnelgeschwindigkeit, Spiralzoom und -drehung sowie die Wellen und Ringe bekommen auf jedem Schlag einen Kick, mit Helligkeitspulsen auf den Schlägen.
Morphs statt Schnitten innerhalb der Szenen: Augen zu Schachbrett zu Sonnenstrahlen, die Metaball-Kette zu Klumpen zu Tröpfchen zu Knüllen, dann die Kaleidoskop-Faltungszahlen 4, 6, 3, 8, 10.
Übergänge: Weiß-Outs und Einblenden aus Weiß auf Taktgrenzen, ein Glitch-Blitz in die Spirale, ein weißer Bloom aus der Mitte in den Kugelraum, Sechzehntel-Blitzschnitte in der Montage, ein 50-ms-Kollaps ins Dunkle vor dem Titel.
Titel: ein weichkantiger Wipe von links nach rechts, eine RGB-Trennung, die von 10 auf 3 px ausläuft, dann eine Rauschauflösung und Ausblendung am Ende.

Musik

Neon-Synthwave mit 120 BPM in a-Moll, ein Akkord pro Takt (2 s): Am F für das Intro, dann Am F C G Am, F im Breakdown, G bei der Rückkehr, Am am Ende. Die Kick trifft exakt die Schläge des Bildes (alle 0,5 s).

0–4 s: eine Glockenfigur in Achteln über einem warmen Pad, mit langem Riser und umgekehrtem Becken, ohne Drums.
Bei 4,0 s: eine Four-on-the-Floor-Kick, ein Achtelbass mit Oktavsprüngen und ein Saw-Arpeggio in Sechzehnteln. Bass und Arpeggio pumpen mit der Kick.
Ab 8,0 s: eine große Snare mit Hall auf Zwei und Vier, Off-Beat-Hats und ein Square-Lead mit langen Noten, mit einem Snare-Fill in die 14,0 s.
14,0–16,0 s: Drums und Bass fallen weg, das Pad schwillt an, und ein gefiltertes Arpeggio steigt mit einem 32tel-Snare-Wirbel in die 16,0 s.
Bei 16,0 s: alles knallt zurück.
Die Drums hören einen halben Schlag vor 18,0 s auf, und ein einzelner klingender a-Moll-add9-Akkord trägt die Endkarte.

Sound

Soundeffekte zum Bild:

ein weicher hoher Sinus bei 0,3 s für die Wimpernlinie
ein Riser in einen tiefen Boom bei 4,0 s
ein kurzer Riser und Boom bei 8,0 s
ein Glitch bei 11,33 s
ein Riser und Whoosh in die 14,0 s
vier kurze Glitch-Ticks auf den Montageschnitten
ein langer Riser in einen Boom bei 16,0 s
ein Whoosh beim Blinzeln bei 17,95 s
ein Downer und Sub-Drop bei 18,0 s
eine weiche Glocke, wenn der Titel bei 18,12 s erscheint
ein luftiger Whoosh, während sich der Titel auflöst
Kein Voice-over. Mix auf etwa −14 LUFS, True Peak unter −1 dBTP.

Referenzen

Outrun- und Synthwave-Farben der späten 80er, Op-Art-Moiré und Konturlinien-Illusionen, psychedelische Augenmotive, prozedurale Showreels im Demoszene-Stil und Motion-Design-Studio-Reels mit technischem HUD.

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

Vorschau der Technik „Spitzes Mandelauge mit logarithmisch verteilten Konturlinien“ — Bei 0:02 im Video

Formen

Spitzes Mandelauge mit logarithmisch verteilten Konturlinien

Ein Auge, in einem einzigen Fragment-Shader gezeichnet: Die Lider sind die Linse zwischen zwei Kreisen (Spitzen bei ±0.53, halbe Höhe 0.237 der Bildhöhe), und jede Linie außerhalb ist eine Isolinie desselben Zwei-Kreise-Abstands. So bleiben die Linien spitz und werden zu geraden waagerechten Streifen, wenn sich das Auge schließt. Die Linien liegen auf logarithmischen Schritten (jeder Abstand etwa 13% breiter), ihre Phase fließt nach außen; eine faserige Iris (70 verdrehte Winkelwellen) in Pfirsich-, Mint- und Violettbändern, ein Ringlicht und ein weicher innerer Rand runden es ab. Die Lider öffnen sich als Schlitz (0.3 s), dann mit power2.out über 0.48 s.

Wann einsetzen Eine hypnotische Hero-Form, die sich öffnen, blinzeln und im Takt zu Linien schließen kann.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spitzes Mandelauge mit logarithmisch verteilten Konturlinien</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>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="6" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Pointed-almond eye with log-spaced contour lines: the lids are the lens between two circles; every
// line outside is an iso-line of the same two-circle distance, spaced in log steps and flowing outward.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform float uT, uOpen, uFlow;
out vec4 o;
float almond(vec2 q, float a, float b) {          // two-circle lens, tips at (+-a, 0), half-height b
  b = max(b, 1e-4);
  float R = (a * a + b * b) / (2.0 * b), c = R - b, k = b * (2.0 * R - b), qq = dot(q, q);
  float d1 = (qq + 2.0 * q.y * c - k) / (length(q + vec2(0.0, c)) + R);
  float d2 = (qq - 2.0 * q.y * c - k) / (length(q - vec2(0.0, c)) + R);
  return max(d1, d2);
}
void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
  float px = 1.0 / uRes.y;
  float d = almond(p, 0.53, 0.237 * uOpen);
  // lines: log spacing (each step ~13% wider), phase flowing outward
  float dd = max(d, 0.0);
  float lu = log(1.0 + dd / 0.207) / 0.089 - uFlow;
  float dist = abs(fract(lu + 0.5) - 0.5) / (px / ((0.207 + dd) * 0.089));
  float idx = floor(lu + 0.5);
  vec3 lineCol = mod(idx, 3.0) < 1.0 ? vec3(0.94, 0.93, 1.0) : mod(idx, 3.0) < 2.0 ? vec3(0.94, 0.54, 0.16) : vec3(0.18, 0.77, 0.64);
  lineCol = mix(lineCol, vec3(0.88, 0.16, 0.49), smoothstep(0.08, 0.6, dd));
  float fade = exp(-dd * 2.8);
  vec3 outside = vec3(0.06, 0.02, 0.19) * (0.3 + 0.7 * fade) + lineCol * exp(-dist * dist / 0.8) * (0.15 + 0.85 * fade);
  // inside: sclera, iris bands with twisted fibres, pupil, a ring highlight
  float r = length(p), ang = atan(p.y, p.x), rp = 0.08;
  float rn = clamp((r - rp) / (0.235 - rp), 0.0, 1.0);
  float a2 = ang + 0.15 * uT + rn * 1.3;
  float fib = 0.5 + 0.5 * sin(70.0 * a2 + 4.0 * sin(11.0 * a2 + rn * 6.0) + rn * 8.0);
  float w = rn + 0.05 * (fib - 0.5);
  vec3 ic = mix(vec3(0.85, 0.48, 0.12), vec3(1.0, 0.86, 0.7), smoothstep(0.0, 0.12, w));
  ic = mix(ic, vec3(0.78, 0.95, 0.91), smoothstep(0.4, 0.5, w));
  ic = mix(ic, vec3(0.6, 0.55, 0.96), smoothstep(0.7, 0.8, w)) * (0.8 + 0.3 * fib);
  vec3 sclera = mix(vec3(0.15, 0.1, 0.32), vec3(0.03, 0.02, 0.06), smoothstep(0.1, 0.55, r));
  vec3 inside = mix(sclera, ic, smoothstep(0.235 + px, 0.235 - px, r));
  inside = mix(inside, vec3(0.23, 0.16, 0.37), smoothstep(rp + px, rp - px, r));
  inside += exp(-pow((length(p - vec2(-0.118, 0.094)) - 0.037) / 0.0035, 2.0));
  inside *= mix(0.42, 1.0, smoothstep(0.0, 0.05, -d));
  vec3 col = mix(outside, inside, smoothstep(px, -px, d));
  col += vec3(0.92, 0.9, 0.98) * (exp(-pow(d / (px * 1.6), 2.0)) * 0.85 + exp(d / (px * 5.0)) * step(d, 0.0) * 0.45);
  o = vec4(col, 1.0);
}`;
const draw = makeShader(document.getElementById("gl"), FS);
const s = { t: 0, open: 0, flow: 0 };
const tl = gsap.timeline({ paused: true });
tl.to(s, { t: 6, flow: 3.3, duration: 6, ease: "none" }, 0);           // lines flow outward ~0.55 line/s
tl.fromTo(s, { open: 0 }, { open: 0.06, duration: 0.35, ease: "sine.inOut" }, 0.3);   // a slit first
tl.to(s, { open: 1, duration: 0.48, ease: "power2.out" }, 0.85);       // then the lids open
tl.to(s, { open: 0, duration: 0.15, ease: "power2.in" }, 5.6);         // a blink at the end
tl.eventCallback("onUpdate", () => draw({ uT: s.t, uOpen: s.open, uFlow: s.flow }));
draw({ uT: 0, uOpen: 0, uFlow: 0 });
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „Einfahrt durch die Pupille in die nächste Szene“ — Bei 0:03 im Video

Übergang

Einfahrt durch die Pupille in die nächste Szene

Die nächste Szene läuft bereits in der Pupille, so verkleinert, dass sie genau 1:1 erreicht, wenn die Pupille das Bild füllt (nie darüber hinaus vergrößert). Die Kamera zoomt exponentiell in die Pupille (ln zoom = 5.5 x^2 / (x + 0.1) in etwa 0.55 s), und der Schnitt landet auf einem weißen Blitz, der wie 0.94 / (1 + (t / 0.07)^2.5) abklingt, mit radialen Streifen, die durch 12-faches Abtasten des Bildes zur Mitte hin entstehen.

Wann einsetzen Immer dann, wenn sich eine Welt durch ein Loch, eine Linse oder ein Auge in die nächste öffnen soll.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Einfahrt durch die Pupille 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>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="4" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="4" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Push-in through the pupil: the next scene is already playing inside the pupil, scaled so that it reaches
// 1:1 when the pupil covers the frame; the zoom is exponential (ln zoom = 5.5 x^2 / (x + 0.1)), and the cut
// lands on a white flash whose radial streaks are the same frame sampled toward the centre.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform float uT, uZoom, uFlash;
out vec4 o;
vec3 inner(vec2 p, float t) {                       // the next scene: rings of dots flying outward
  float r = max(length(p), 1e-3), a = atan(p.y, p.x);
  float cu = (1.0 / r) / 0.75 - t * 4.0, cv = a / 6.2832 * 18.0 + floor(cu) * 0.5;
  vec2 c = vec2(fract(cv) - 0.5, (fract(cu) - 0.5) * r * 2.1);
  float dot1 = smoothstep(0.2, 0.15, length(c));
  vec3 col = mix(vec3(0.03, 0.02, 0.1), mix(vec3(0.98, 0.18, 0.54), vec3(0.18, 0.83, 0.69), mod(floor(cu), 2.0)), dot1);
  return col + vec3(0.94, 0.93, 1.0) * exp(-r / 0.06);
}
vec3 scene(vec2 p) {
  vec2 q = p / uZoom;                               // camera pushes into the pupil at the centre
  float r = length(q), px = 1.0 / (uRes.y * uZoom);
  float a = atan(q.y, q.x);
  float fib = 0.5 + 0.5 * sin(70.0 * (a + r * 5.0));
  vec3 iris = mix(vec3(1.0, 0.82, 0.25), vec3(0.49, 0.42, 0.95), smoothstep(0.12, 0.22, r)) * (0.75 + 0.35 * fib);
  vec3 col = mix(vec3(0.05, 0.03, 0.12), iris, smoothstep(0.235 + px, 0.235 - px, r));
  float rp = 0.12;                                  // pupil radius
  float k = max(1.05 / (rp * uZoom), 1.0);          // inner scene shrunk into the pupil, never past 1:1
  col = mix(col, inner(p * k, uT), smoothstep(rp + px, rp - px, r));
  return col;
}
void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
  vec3 col = scene(p);
  if (uFlash > 0.0) {
    vec3 acc = vec3(0.0);
    for (int i = 0; i < 12; i++) acc += scene(p * (1.0 - uFlash * 0.3 * float(i) / 11.0));
    col = mix(col, acc / 12.0, clamp(uFlash * 1.5, 0.0, 1.0));
    col = mix(col, vec3(1.0) * (1.0 - 0.26 * dot(p, p)), uFlash);
  }
  o = vec4(col, 1.0);
}`;
const draw = makeShader(document.getElementById("gl"), FS);
const s = { t: 0 };
const D = 4.0, CUT = 2.6;                           // push-in 2.0 -> 2.6 s, flash at the cut
const tl = gsap.timeline({ paused: true });
tl.to(s, { t: D, duration: D, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => {
  const t = s.t;
  const x = Math.max(0, Math.min(t, CUT) - 2.0);
  const zoom = t < CUT ? Math.exp((5.5 * x * x) / (x + 0.1)) : 9.0;
  const flash = t >= CUT ? 0.94 / (1 + Math.pow((t - CUT) / 0.07, 2.5)) : 0;
  draw({ uT: t, uZoom: zoom, uFlash: flash });
});
draw({ uT: 0, uZoom: 1, uFlash: 0 });
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „Perspektivischer Tunnel aus Icon-Ringen“ — Bei 0:05 im Video

Formen

Perspektivischer Tunnel aus Icon-Ringen

Ringe aus Mandel-Icons sitzen auf der Tiefe 1/r = 0.75 k und drängen sich wie in einer echten Röhre zur Mitte; 18 Icons pro Ring, benachbarte Ringe um eine halbe Zelle versetzt und gegenläufig drehend. Der Flug ist eine Verschiebung des Tiefenindex (etwa 11 Ringe pro Sekunde), die fernen Ringe verschmelzen zu Dunst, und bei jedem Beat verlässt ein leuchtender Ring den weißen Kern und wächst mit power2.out.

Wann einsetzen Ein schneller, endloser Durchflug für einen Drop oder einen energiegeladenen Abschnitt.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Perspektivischer Tunnel aus Icon-Ringen</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>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="5" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Perspective tunnel of icons: ring k sits at depth 1/r = 0.75 k, so rings crowd toward the centre like a real
// tube; N icons per ring, alternate rings turn opposite ways and sit half a cell apart; each beat sends a
// glowing ring out from the core.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform float uFly, uSpin, uRingR, uRingI;
out vec4 o;
float almond(vec2 q, float a, float b) {
  b = max(b, 1e-4);
  float R = (a * a + b * b) / (2.0 * b), c = R - b, k = b * (2.0 * R - b), qq = dot(q, q);
  return max((qq + 2.0 * q.y * c - k) / (length(q + vec2(0.0, c)) + R), (qq - 2.0 * q.y * c - k) / (length(q - vec2(0.0, c)) + R));
}
void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
  float r = max(length(p), 1e-4), a = atan(p.y, p.x);
  const float N = 18.0, DZ = 0.75;
  float cu = (1.0 / r) / DZ + uFly;                 // depth rings
  float ring = floor(cu);
  float dir = mod(ring, 2.0) < 1.0 ? 1.0 : -1.0;
  float cv = a / 6.2832 * N + uSpin * dir + ring * 0.5;
  float aspect = r * DZ * N / 6.2832;               // radial / tangential size of a cell
  vec2 c = vec2(fract(cv) - 0.5, (fract(cu) - 0.5) * aspect);
  float px = N / (6.2832 * r * uRes.y);
  float hb = min(0.22, 0.42 * aspect);
  float d = almond(c, 0.46, hb);
  float inside = smoothstep(px, -px, d);
  vec3 irisC = mod(ring, 2.0) < 1.0 ? vec3(0.91, 0.16, 0.5) : vec3(0.6, 0.56, 0.96);
  vec3 eye = mix(vec3(0.05, 0.04, 0.16), irisC, smoothstep(min(0.155, hb * 0.75) + px, min(0.155, hb * 0.75) - px, length(c)));
  vec3 col = mix(vec3(0.02, 0.02, 0.05), eye, inside);
  col += vec3(0.15, 0.71, 0.59) * exp(-pow(d / (px * 1.4 + 0.014), 2.0));
  col = mix(col, vec3(0.16, 0.08, 0.38), smoothstep(0.1, 0.4, px));     // far rings melt into haze
  col += vec3(0.94, 0.93, 1.0) * (exp(-r / 0.05) * 0.9 + exp(-r / 0.12) * 0.35);
  float rr = abs(r - uRingR);
  col += vec3(1.0, 0.35, 0.66) * (exp(-pow(rr / 0.011, 2.0)) * 1.3 + exp(-rr / 0.044) * 0.45) * uRingI;
  o = vec4(col, 1.0);
}`;
const draw = makeShader(document.getElementById("gl"), FS);
const s = { t: 0 };
const D = 5.0, BEAT = 0.5;
const tl = gsap.timeline({ paused: true });
tl.to(s, { t: D, duration: D, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => {
  const t = s.t, x = (t % BEAT) / BEAT;
  const out = 1 - Math.pow(1 - x, 2);
  draw({ uFly: t * 11.0, uSpin: t * 0.35, uRingR: 0.045 + 0.062 * out, uRingI: 0.6 + 0.8 * Math.exp(-x * 3.0) });
});
draw({ uFly: 0, uSpin: 0, uRingR: 0.045, uRingI: 1.4 });
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „Gescherte logarithmisch-polare Spirale aus Tropfenzellen“ — Bei 0:12 im Video

Formen

Gescherte logarithmisch-polare Spirale aus Tropfenzellen

Zellen sitzen auf 12 logarithmischen Spiralarmen (Winkel + K ln r konstant, K = -1.25) und wachsen entlang jedes Arms in Schritten von 1.5x nach außen; jede Zelle wird im eigenen Bezugssystem ihres Arms gezeichnet, sodass Tropfen, Iriden und Rauten der Spirale mit doppelten Konturen folgen. Das Zoomen zur Mitte ist eine Verschiebung von ln r (etwa 1 pro Sekunde), das Drehen eine Verschiebung des Winkels; beides wird bei jedem Beat leicht angestoßen.

Wann einsetzen Ein hypnotischer Strudel, der den Blick immer wieder zur Mitte zieht.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gescherte logarithmisch-polare Spirale aus Tropfenzellen</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>
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="5" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="5" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Sheared log-polar spiral: cells sit on N arms (a + K ln r = const) and step 1.5x outward along each arm;
// every cell gets a teardrop outline drawn in the arm's own frame, so the shapes follow the spiral. Zooming
// is a shift of ln r, turning a shift of the angle; both pulse on the beat.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform float uZoom, uRot;
out vec4 o;
float hash(vec2 p) { vec3 q = fract(vec3(p.xyx) * 0.1031); q += dot(q, q.yzx + 33.33); return fract((q.x + q.y) * q.z); }
void main() {
  vec2 p = (gl_FragCoord.xy - 0.5 * uRes) / uRes.y;
  float r = max(length(p), 1e-4), a = atan(p.y, p.x);
  const float N = 12.0, DU = 0.405, K = -1.25;
  float u = log(r) + uZoom;
  float cu = u / DU, cv = (a + uRot + K * u) / 6.2832 * N;
  float cw = 6.2832 / N;
  float sd = (fract(cu) - 0.5) * DU, td = (fract(cv) - 0.5) * cw - K * sd;
  vec2 dir = normalize(vec2(-K, 1.0));
  float halfW = 0.5 * cw / sqrt(1.0 + K * K), L = 0.5 * DU * sqrt(1.0 + K * K) / halfW;
  vec2 c = vec2(dot(vec2(td, sd), vec2(dir.y, -dir.x)), dot(vec2(td, sd), dir)) / halfW;
  float px = 1.0 / (r * uRes.y * halfW);
  float h = hash(vec2(mod(floor(cv), N), mod(floor(cu), 61.0)));
  float egg = length(vec2(c.x / 0.86, c.y / (L * 0.86 + 0.1 * c.y))) - 1.0;
  float inside = smoothstep(px, -px, egg);
  vec3 fill = h < 0.5
    ? mix(vec3(0.06, 0.04, 0.15), h < 0.25 ? vec3(0.16, 0.74, 0.62) : vec3(0.94, 0.16, 0.5), smoothstep(0.6, 0.5, length(c)))
    : mix(vec3(0.99, 0.76, 0.86), vec3(0.98, 0.18, 0.54), smoothstep(0.0, 1.0, abs(c.x) / 0.62 + abs(c.y) / (L * 0.62)));
  vec3 col = mix(vec3(0.01, 0.01, 0.02), fill, inside);
  col += vec3(0.77, 0.74, 0.94) * (exp(-pow(egg / (px * 1.2 + 0.01), 2.0)) * 0.85 + exp(-pow((egg + 0.13) / (px * 1.2 + 0.008), 2.0)) * 0.4 * inside);
  col = mix(col, vec3(0.7, 0.5, 0.8), smoothstep(0.06, 0.25, px));
  col += vec3(0.98, 0.98, 1.0) * exp(-r / 0.06) * 1.1;
  o = vec4(col, 1.0);
}`;
const draw = makeShader(document.getElementById("gl"), FS);
const s = { t: 0 };
const D = 5.0;
const tl = gsap.timeline({ paused: true });
tl.to(s, { t: D, duration: D, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => {
  let burst = 0;
  for (let b = 0.5; b < s.t; b += 0.5) burst += 1 - Math.pow(1 - Math.min(1, (s.t - b) / 0.3), 2);
  draw({ uZoom: -(s.t * 1.0 + burst * 0.3), uRot: -s.t * 0.5 - burst * 0.08 });
});
draw({ uZoom: 0, uRot: 0 });
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „HUD, das die Zeit hält und seine Labels entschlüsselt“ — Bei 0:04 im Video

Typografie

HUD, das die Zeit hält und seine Labels entschlüsselt

Ein Rahmen im Broadcast-Stil in kleiner, gesperrter Monospace-Schrift: Eckklammern, Name und Tagline, ein Abschnittszähler und -label, die Buchstabe für Buchstabe entschlüsselt werden (jeder Buchstabe löst sich in 0.38 s von links nach rechts auf und springt 30 Mal pro Sekunde durch Zeichen), ein Timecode in 60-fps-Frames, Takt.Schlag.Sechzehntel bei 120 BPM, vier Beat-Quadrate und eine Fortschrittslinie.

Wann einsetzen Um ein Reel oder Showreel mit Kapiteln, Tempo und laufender Uhr zu rahmen.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HUD, das die Zeit hält und seine Labels entschlüsselt</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=JetBrains+Mono:wght@400;700&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(60% 60% at 50% 50%, #1c0b5d, #0d0b1e); }
#hud { position: absolute; inset: 0; font-family: "JetBrains Mono", monospace; white-space: pre; }
.br { position: absolute; width: 21px; height: 21px; border: 0 solid #e9e4f2; }
.tl { left: 28px; top: 28px; border-left-width: 1.5px; border-top-width: 1.5px; }
.tr { right: 27px; top: 28px; border-right-width: 1.5px; border-top-width: 1.5px; }
.bl { left: 28px; bottom: 27px; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.bbr { right: 27px; bottom: 27px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.big { position: absolute; font-size: 15px; line-height: 15px; font-weight: 700; letter-spacing: 4.9px; color: #faf9ff; }
.small { position: absolute; font-size: 11px; line-height: 11px; letter-spacing: 3.4px; color: #9890b4; }
.bright { color: #faf9ff; opacity: 0.8; }
#name { left: 46px; top: 45px; } #tag { left: 46px; top: 69px; }
#num { right: 45px; top: 49px; } #label { right: 44px; top: 68px; }
#tc { left: 46px; top: 1007px; } #bpm { left: 46px; top: 1027px; } #credit { right: 44px; top: 1024px; }
#track { position: absolute; left: 106px; top: 1051px; width: 1709px; height: 1.5px; background: rgba(233, 228, 242, 0.2); }
#fill { width: 100%; height: 100%; background: rgba(233, 228, 242, 0.72); transform-origin: 0 50%; transform: scaleX(0); }
.sq { position: absolute; top: 1008px; width: 8px; height: 8px; background: rgba(233, 228, 242, 0.26); }
.sq.on { background: #ffffff; }
#sq0 { left: 1818px; } #sq1 { left: 1834px; } #sq2 { left: 1850px; } #sq3 { left: 1866px; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="6" data-width="1920" data-height="1080">
  <div id="hud" class="clip" data-start="0" data-duration="6">
    <div class="br tl"></div><div class="br tr"></div><div class="br bl"></div><div class="br bbr"></div>
    <div id="name" class="big">"YOUR NAME"</div>
    <div id="tag" class="small">"YOUR TAGLINE"</div>
    <div id="num" class="small">01 / 03</div>
    <div id="label" class="big">"FIRST"</div>
    <div id="tc" class="small bright">TC 00:00:00:00</div>
    <div id="bpm" class="small">120 BPM · 01.1.1</div>
    <div class="sq" id="sq0"></div><div class="sq" id="sq1"></div><div class="sq" id="sq2"></div><div class="sq" id="sq3"></div>
    <div id="credit" class="big">"SITE.COM"</div>
    <div id="track"><div id="fill"></div></div>
  </div>
</div>
<script>
// A HUD that keeps time: timecode in frames of 60 fps, bar.beat.sixteenth at 120 BPM, four beat squares,
// a progress line, and section labels that decode letter by letter (each letter resolves left to right
// over 0.38 s; until then it shows a glyph that changes 30 times a second).
const SECTIONS = [{ t: 0, n: "01", label: '"FIRST"' }, { t: 2, n: "02", label: '"SECOND"' }, { t: 4, n: "03", label: '"THIRD"' }];
const D = 6, GLYPHS = "#%&=+@<>|\\/$*Z0X1";
const $ = (id) => document.getElementById(id);
const pad = (n) => String(n).padStart(2, "0");
const hash = (a, b) => { const h = Math.sin(a * 127.1 + b * 311.7) * 43758.5453; return h - Math.floor(h); };
function decode(text, t, t0, dur, seed) {
  let out = "";
  for (let i = 0; i < text.length; i++) {
    const ch = text[i];
    if (" /()".includes(ch)) { out += ch; continue; }
    out += t >= t0 + ((i + 0.6) * dur) / text.length ? ch : GLYPHS[Math.floor(hash(i + seed * 13.7, Math.floor(t * 30)) * GLYPHS.length) % GLYPHS.length];
  }
  return out;
}
function render(t) {
  let si = 0;
  SECTIONS.forEach((s, i) => { if (t >= s.t) si = i; });
  const s = SECTIONS[si];
  $("num").textContent = si ? decode(s.n + " / 03", t, s.t, 0.38, si) : s.n + " / 03";
  $("label").textContent = si ? decode(s.label, t, s.t, 0.38, si + 7) : s.label;
  const fr = Math.floor(t * 60 + 1e-4);
  $("tc").textContent = "TC 00:00:" + pad(Math.floor(fr / 60)) + ":" + pad(fr % 60);
  const sx = Math.floor(t * 8 + 1e-4), beat = Math.floor((sx % 16) / 4) + 1;
  $("bpm").textContent = "120 BPM · " + pad(Math.floor(sx / 16) + 1) + "." + beat + "." + ((sx % 4) + 1);
  for (let i = 0; i < 4; i++) $("sq" + i).classList.toggle("on", i === beat - 1);
  $("fill").style.transform = "scaleX(" + (t / D).toFixed(4) + ")";
}
const s = { t: 0 };
const tl = gsap.timeline({ paused: true });
tl.fromTo("#hud", { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power1.inOut" }, 0.1);
tl.to(s, { t: D, duration: D, ease: "none" }, 0);
tl.eventCallback("onUpdate", () => render(s.t));
render(0);
window.__timelines = window.__timelines || {};
window.__timelines["main"] = tl;
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Vorschau der Technik „Leuchtende Korn-Wortmarke mit Wipe, RGB-Split und Auflösung“ — Bei 0:19 im Video

Typografie

Leuchtende Korn-Wortmarke mit Wipe, RGB-Split und Auflösung

Das Wort wird einmal in eine Mipmap-Textur gezeichnet; der Shader liest sie scharf für die Buchstaben mit einem Rot/Blau-Split, der sich von 10 auf 3 px setzt, und auf drei Unschärfestufen für ein Glühen, das von links nach rechts violett, türkis und rosa getönt ist. Die Buchstaben sind mit Korn gefüllt, werden von links nach rechts mit weich verwischter Kante in 0.52 s eingewischt und am Ende in 0.4 s von Rauschen aufgefressen.

Wann einsetzen Eine Endkarte oder ein Titel, der wie ins Auge eingebranntes Licht leuchten soll.

Code anzeigen

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Leuchtende Korn-Wortmarke mit Wipe, RGB-Split und Auflösung</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=Unbounded:wght@900&display=swap");
#root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #000; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
</style>
</head>
<body>
<div id="root" data-composition-id="main" data-start="0" data-duration="3.5" data-width="1920" data-height="1080">
  <canvas id="gl" class="clip" data-start="0" data-duration="3.5" width="1920" height="1080"></canvas>
</div>
<script>
function makeShader(canvas, fs) {
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const vs = "#version 300 es\nin vec2 p;\nvoid main() { gl_Position = vec4(p, 0.0, 1.0); }";
  const sh = (type, src) => { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); return s; };
  const pr = gl.createProgram();
  gl.attachShader(pr, sh(gl.VERTEX_SHADER, vs));
  gl.attachShader(pr, sh(gl.FRAGMENT_SHADER, fs));
  gl.bindAttribLocation(pr, 0, "p");
  gl.linkProgram(pr);
  gl.useProgram(pr);
  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  const loc = {};
  const U = (n) => (n in loc ? loc[n] : (loc[n] = gl.getUniformLocation(pr, n)));
  return (uniforms) => {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.uniform2f(U("uRes"), canvas.width, canvas.height);
    for (const k in uniforms) {
      const v = uniforms[k];
      if (typeof v === "number") gl.uniform1f(U(k), v);
      else if (v.length === 2) gl.uniform2f(U(k), v[0], v[1]);
      else if (v.length === 3) gl.uniform3f(U(k), v[0], v[1], v[2]);
    }
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  };
}

// Glowing grain wordmark: the word is drawn once into a mipmapped texture; the shader reads it sharp for the
// letters (with a red/blue split), at three blur levels for a glow tinted left-to-right, fills the letters
// with grain, wipes them in left to right with a soft blurred edge, and at the end eats them with noise.
const FS = `#version 300 es
precision highp float;
uniform vec2 uRes;
uniform sampler2D uText;
uniform float uReveal, uDiss, uSplit, uSeed;
uniform vec2 uBox;   // left and right edge of the word, 0..1
out vec4 o;
float hash(vec2 p) { vec3 q = fract(vec3(p.xyx) * 0.1031); q += dot(q, q.yzx + 33.33); return fract((q.x + q.y) * q.z); }
void main() {
  vec2 uv = gl_FragCoord.xy / uRes;
  float tx = (uv.x - uBox.x) / (uBox.y - uBox.x);
  float rev = smoothstep(uReveal + 0.05, uReveal - 0.03, tx);
  float lod = (1.0 - rev) * 2.5;
  float sp = uSplit / uRes.x;
  vec3 core = vec3(textureLod(uText, uv - vec2(sp, 0.0), lod).r, textureLod(uText, uv, lod).r, textureLod(uText, uv + vec2(sp, 0.0), lod).r);
  float glow = textureLod(uText, uv, 3.0).r * 0.35 + textureLod(uText, uv, 4.6).r * 0.55 + textureLod(uText, uv, 6.0).r * 0.55;
  vec3 tint = mix(mix(vec3(0.94, 0.93, 1.0), vec3(0.88, 1.0, 0.96), smoothstep(0.15, 0.5, tx)), vec3(1.0, 0.88, 0.93), smoothstep(0.55, 0.92, tx));
  vec3 gcol = mix(mix(vec3(0.49, 0.42, 0.95), vec3(0.18, 0.83, 0.69), smoothstep(0.15, 0.48, tx)), vec3(0.98, 0.18, 0.54), smoothstep(0.58, 0.95, tx));
  float g = hash(floor(gl_FragCoord.xy) + uSeed * 17.0);
  float keep = smoothstep(uDiss - 0.1, uDiss + 0.1, g);
  vec3 col = core * tint * (0.74 + 0.34 * g) * keep + gcol * glow * 0.55 * (0.35 + 0.65 * keep);
  o = vec4(vec3(0.05, 0.04, 0.12) + col * rev, 1.0);
}`;
const canvas = document.getElementById("gl");
const W = canvas.width, H = canvas.height;
const WORD = "YOUR WORD";
document.fonts.load('900 100px "Unbounded"', WORD).then(() => {
  const c = document.createElement("canvas");
  c.width = W; c.height = H;
  const g = c.getContext("2d");
  g.fillStyle = "#000"; g.fillRect(0, 0, W, H);
  g.font = '900 100px "Unbounded"';
  const size = (100 * 1436) / g.measureText(WORD).width;   // fit the word to 1436 px
  g.font = `900 ${size}px "Unbounded"`;
  g.textAlign = "center";
  const m = g.measureText(WORD);
  g.fillStyle = "#fff";
  g.fillText(WORD, W / 2, H / 2 + m.actualBoundingBoxAscent / 2);
  const box = [(W / 2 - m.actualBoundingBoxLeft) / W, (W / 2 + m.actualBoundingBoxRight) / W];
  const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true });
  const draw = makeShader(canvas, FS);
  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);
  gl.generateMipmap(gl.TEXTURE_2D);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
  const s = { t: 0 };
  const D = 3.5;
  const tl = gsap.timeline({ paused: true });
  tl.to(s, { t: D, duration: D, ease: "none" }, 0);
  const frame = () => {
    const t = s.t;
    const e = (x) => 1 - Math.pow(1 - Math.min(1, Math.max(0, x)), 1.6);
    draw({ uReveal: -0.08 + 1.18 * e((t - 0.1) / 0.52), uDiss: -0.2 + 1.3 * Math.pow(Math.min(1, Math.max(0, (t - 3.0) / 0.4)), 1.4),
           uSplit: 10 - 7 * e((t - 0.1) / 0.8), uSeed: Math.floor(t * 24), uBox: box });
  };
  tl.eventCallback("onUpdate", frame);
  frame();
  window.__timelines = window.__timelines || {};
  window.__timelines["main"] = tl;
});
</script>
<script type="module">
// Fit the composition to the window and play its timeline on a loop.
const root = document.getElementById('root');
const width = Number(root?.dataset.width) || 1080;
const height = Number(root?.dataset.height) || 1920;
const fit = () => {
  if (!root) return;
  const scale = Math.min(innerWidth / width, innerHeight / height);
  Object.assign(root.style, {
    width: width + 'px',
    height: height + 'px',
    transform: 'scale(' + scale + ')',
    marginLeft: (innerWidth - width * scale) / 2 + 'px',
    marginTop: (innerHeight - height * scale) / 2 + 'px',
  });
};
fit();
addEventListener('resize', fit);
window.__timelines?.main?.repeat(-1).play(0);
</script>
</body>
</html>

Weitere Prompts

Vorschau des Prompts „Lebendiges Mathe-Showreel mit Glitch-Schnitten im Beat“

Lebendiges Mathe-Showreel mit Glitch-Schnitten im Beat

<direction> Erstelle ein 20-sekündiges Motion-Graphics-Showreel, das vollständig aus Mathematik besteht: Jedes Bild wird aus der laufenden Zeit t erzeugt, ohne Fotos, Filmmaterial oder Bilder. Querformat 1920x1080 bei 60 fps. Es soll sich wie ein präzises Laborinstrument anfühlen, das plötzlich schön wird: dunkel, leuchtend, exakt, mit einem Glitch-Schnitt alle zwei Sekunden im Beat. Acht Mathe-Szenen laufen in einem festen Instrumenten-Rahmen (Eckklammern, Wortmarke, Szenenzähler und -label, Beat-Punkt, laufende Uhr, Fortschrittslinie, Live-Gleichung), danach eine Endkarte mit der Marke. Vermeide Körnung, Stockbilder und jede Dekoration, die nicht aus der Mathematik stammt. </direction> <structure> Schnitte bei 2, 4, 8, 10, 12, 14, 16 und 18 s, alle im Beat. 1) 0-2 s, Ursprung: Ein blasser türkiser Ring wächst aus der Mitte bis r 238 px (0-0,45 s, ease out); Achsen mit Teilstrichen alle 60 px wachsen aus einem leuchtenden Mittelpunkt; bei jedem Beat verlässt ein Wellenring den Punkt. Eine weit gesperrte Zeile wie "YOUR AI MOTION DESIGNER" löst sich aus Zufallszeichen auf (0,3-0,78 s); eine kurze Serifenzeile wie "Ideas in motion" wird neben dem Ursprung Buchstabe für Buchstabe getippt (0,5-1,12 s). Von 1,35 bis 1,95 s windet sich ein türkiser Bogen mit r 220 einmal um den Ursprung, mit einem weißen Punkt an der Spitze, und die Worte blenden aus. 2) 2-4 s, Einheitskreis: ein türkiser Kreis (r 220) links, der Winkel wächst mit 4,52 rad/s. Weißer Radius, türkiser Kosinus-Schenkel, pinker Sinus-Schenkel, ein orangener Winkelbogen mit der Beschriftung θ, eine gestrichelte pinke Linie zu einem pinken Punkt bei x 820, wo der Sinus geschrieben steht; die Winkelhistorie zieht sich als leuchtender pinker Sinus (104 px pro Radiant) nach rechts, mit einem blassen türkisen Kosinus daneben und gepunkteten +1/-1-Hilfslinien. Live-Anzeigen "θ = 4.524 rad" und "sin θ = -0.982". Gleichung: y = sin θ. 3) 4-8 s, Fourier-Epizykel: Eine Kette aus 180 rotierenden Kreisen (nach Größe sortiert, blasse lavendelfarbene Ringe, weiße Radien) zeichnet von 4,3 bis 7,2 s (Sinus-in-out-Fortschritt) den Umriss eines großen π in leuchtendem Orange, danach füllt sich die Form mit einem weichen Verlauf von Pink zu Violett, während die Kette ausblendet. Links leuchtet ein Spektrum von |cₙ| für n = -24...24 (Balkenhöhe nach der Wurzel der Amplitude) von der Mitte nach außen auf, während die Zeichnung fortschreitet; Anzeigen "K = 180 terms" und "t/2π = 0.527". Gleichung: f(t) = Σ cₙ e^{int}. 4) 8-10 s, ein 3D-Lissajous-Knoten (sin 3t, sin 2t, sin 5t) wird in 0,6 s gezeichnet und dreht sich dann in Perspektive: ein Band, dessen Farbe entlang der Kurve von Türkis über Violett zu Pink läuft und dessen Breite und Helligkeit der Tiefe folgen. Rechts zeichnet sich ein 3x3-Raster kleiner ebener Lissajous-Figuren mit den Beschriftungen 1:1, 2:3, 4:5, 1:2, 3:4, 5:6, 1:3, 3:5, 3:2 nacheinander mit driftender Phase; die letzte wird türkis in einem dünnen Kasten. 5) 10-12 s, eine Drahtgitter-Wellenfläche z = cos(kr - ωt)/(1 + r) auf einem 48x48-Gitter aus 67° von oben gesehen, in 0,55 s von der Mitte nach außen eingeblendet und langsam drehend, Linien nach Höhe von Türkis über Violett zu Pink gefärbt. Ein oranger Sondenpunkt reitet bei r = 3.2 auf der Fläche, mit Hilfslinie und Live-Anzeigen "r = 3.200", "z = 0.276". 6) 12-14 s, eine Julia-Menge z² + c füllt das Bild, geöffnet durch ein kreisförmiges Portal, das sich mit weißem Rand aus der Mitte ausdehnt. c = 0.7885·e^{iα} gleitet auf seinem Kreis (sine in-out), sodass das Fraktal von getrennten Spiralen zu einer zusammenhängenden Form mit schwarzem Inneren morpht; langsamer Zoom und Rotation. Farben nach Fluchtzeit: Indigo, Violett, Pink, Orange, helles Creme bis Weiß. Ein Einschub zeigt c auf seinem Kreis mit den Anzeigen "Re c" und "Im c". 7) 14-16 s, Phyllotaxis: 1500 Samen bei θₙ = n·137.508°, rₙ = c√n erscheinen von der Mitte nach außen und drehen sich, zuerst weiß, dann pink, violett und türkis. Links schreibt sich φ = 1.6180339887... Ziffer für Ziffer, eine Fibonacci-Reihe wächst (21 und 34 in Türkis), mit "seeds n = 1500" und "spirals 21 ⟲ 34 ⟳". 8) 16-18 s, Eulersche Identität: Die Samen wirbeln zu einem Ring, der links zum türkisen Einheitskreis wird; ein Punkt läuft von 1 nach -1 und hinterlässt einen orangen Bogen über der Oberseite; e^{iπ} erscheint groß, dann nacheinander "+", "1", "=" im Beat, bei -1 pulsiert ein Ring, und "0" landet bei 18 s in einem pinken Ring. 9) 18-20 s, Endkarte: Die Identität schrumpft nach oben; eine große, weit gesperrte Wortmarke wie "YOUR BRAND" (durch deine ersetzen) steigt Buchstabe für Buchstabe von unten innerhalb einer Maske auf (0,06 s Versatz), eine türkis-violett-pinke Unterstreichung wird darüber gezogen, eine gesperrte Zeile wie "IDEAS IN MOTION × [your web address]" löst sich aus Zufallszeichen auf, und eine kursive Serifenzeile "From idea to video in one chat" blendet ein. Alles blendet von 19,35 bis 19,95 s zu Schwarz aus. </structure> <composition> Hintergrund: ein tiefes indigoschwarzes radiales Leuchten, Mitte #10063A, zu den Rändern hin #03030A, ohne Körnung. Akzente: Pink #FB2D89 (Hauptfarbe), Orange #FE9117, Violett #7C6CF2, Türkis #2DD4B0 und Weiß. Linien und Beschriftungen in lavendelgrauen Tönen: #9A98A4 für Labels, #57516F für blasse Bildunterschriften, #433E53 für Achsen. Striche leuchten weich mit 12-16 px Unschärfe in ihrer eigenen Farbe. Schrift: Gleichungen in einer Computer-Modern-artigen Serife (Old Standard TT, Variablen kursiv, Funktionen aufrecht); jede Anzeige, jeder Zähler und jede Beschriftung in einer Monospace (Liberation Mono oder ähnlich), klein und weit gesperrt; der Markenname in einer fetten Grotesk mit sehr weiter Sperrung. Ein fester Rahmen bleibt die ganze Zeit stehen und blendet in 0,15-0,9 s ein: dünne Eckklammern, 27 px lang, 47 px von jeder Ecke eingerückt. Oben links: eine Wortmarke wie "YOUR BRAND" (fett, 22 px, Sperrung etwa 0,35 em) mit einer winzigen gesperrten Zeile darunter wie "IDEAS IN MOTION · [your web address]". Oben rechts: ein Szenenzähler "01 / 08" und darunter ein kurzes Label pro Szene, zum Beispiel "DESCRIBE YOUR IDEA", "EDIT IN WORDS", "NO KEYFRAMES", "3D EFFECTS", "LIVE PREVIEW", "SHAPES AND SOUND", "MUSIC TO THE RHYTHM", "MP4 EXPORT" (durch deine Claims ersetzen), mit einem kleinen pinken Punkt links davon. Unten rechts: eine laufende Uhr "t = 03.35 s" (zwei Dezimalstellen) und eine winzige Zeile mit der Bildnummer. Unten: eine 1 px dicke Fortschrittslinie von x 80 bis 1840, die sich im Lauf der Zeit mit einem türkis-violett-pinken Verlauf füllt, mit kleinen Teilstrichen an jeder Szenengrenze. Unten links: die Gleichung der aktuellen Szene. </composition> <techniques> Jeder Schnitt ist ein 0,2 s langer Glitch: Das ausgehende Bild wird in horizontale, seitlich verschobene Bänder zerschnitten, 3-6 dünne Linien über die ganze Breite in Türkis, Pink, Orange und Weiß flackern, das ganze Bild blitzt bei etwa 14 % weiß auf und klingt in 0,25 s ab, und die Labels des Rahmens laufen einige Frames lang durch Zufallszeichen. Der pinke Beat-Punkt blitzt bei jedem Beat hell auf und klingt in einem halben Beat ab. Die Gleichung der Szene blendet 0,1-0,35 s nach jedem Schnitt ein. Anzeigen, Uhr und Zähler aktualisieren sich live mit der Animation. Gesperrte Zeilen lösen sich aus Zufallszeichen auf; Serifenzeilen werden Buchstabe für Buchstabe getippt; die End-Wortmarke steigt von unten innerhalb einer Maske mit 0,06 s Versatz auf. Einzeichnungen und Morphs nutzen ease-out oder sine in-out, wie pro Szene angegeben. </techniques> <music> Ein mitreißender Elektro-Track mit 120 BPM (Klavierakkorde, warme Pads, Synth-Bass, Four-on-the-Floor-Beat), genau 20 s lang, jeder Schnitt landet auf einem Beat. In den ersten zwei Sekunden weich und gefiltert mit einem Riser zu einem Boom bei 2 s, bis 16 s voller Drive, ein gefilterter Breakdown mit einem Riser zu einem finalen Boom bei 18 s, danach Ausblenden bis 20 s. Mix auf etwa -14 LUFS mit True Peak unter -1 dBTP. </music> <sound> Ein sanftes Whoosh und drei Glitch-Ticks bei jedem Schnitt sowie ein tieferes Whoosh und ein Boom, wenn sich bei 12 s das Fraktal-Portal öffnet, alles über der Musik und auf dem Beat-Raster. Kein Voice-over. </sound> <references> Mathe-Erkläranimationen gekreuzt mit generativer Creative-Coding-Kunst und einem Sci-Fi-Oszilloskop- oder Laborinstrument-HUD: dünne leuchtende Linien auf fast Schwarz, Monospace-Anzeigen, Lehrbuch-Serifengleichungen. </references>

Low-Poly-Logo-Aufbau mit getipptem Namen als Lockup

<direction> Erstelle einen 21-sekündigen Logo-Reveal im Querformat, 1920x1080 bei 60 fps. Er setzt mein Logo langsam aus Low-Poly-Facetten zusammen und endet in einem horizontalen Lockup, in dem mein Markenname getippt wird und darunter ein Slogan steht. Die Idee: ein langer, ruhiger Aufbau ohne Schnitte über vierzehn Sekunden, eine Entladung auf dem Drop der Musik innerhalb von zwei Sekunden, dann ein ruhiges, getipptes Ende. Der Look: ein fast schwarzer Hintergrund mit weicher, kreisförmiger Vignette, flache Markenfarben und klare Grotesk-Schrift. Vermeide Verläufe im Logo, sichtbare Nähte zwischen den Dreiecken, Schnitte während des Aufbaus und alles Unruhige hinter dem Logo. </direction> <structure> 1. 0–2,6 s, das Drahtgitter: Ein Low-Poly-Drahtgitter der Kontur meines Logos zeichnet sich vom unteren Ende des Logos nach außen selbst. Es hat etwa 35–45 Eckpunkte und 90 dünne Linien. 2. 1,9–13,3 s, der Aufbau: Das Logo wird entlang dieses Drahtgitters in etwa 55 Dreiecke zerschnitten, die Stück für Stück von außerhalb des Bildes hereinfliegen. Die Landungen beginnen langsam am unteren Ende des Logos und werden nach oben dichter. Das letzte Stück landet bei 13,3 s, und das Logo ist dann vollständig und exakt. Halte das fertige Logo etwa eine Sekunde. 3. 14,38 s, der Blitz, genau auf dem Drop der Musik. Ein Lichtausbruch, ein sich ausdehnender orangefarbener Ring und ein heller Blitz auf dem Logo erfolgen gleichzeitig. 0,1 s nach dem Schlag wächst hinter dem Logo eine tiefe Tintenplatte und wird zu einem App-Icon mit abgerundeten Ecken. Halte das zentrierte Icon eine Sekunde. 4. 15,74–16,15 s, das Gleiten: Das Icon schrumpft auf etwa 42 % und wandert ins linke Drittel, um Platz für den Namen zu schaffen. 5. 16,1–21 s, der Name: Ein pinker Cursor erscheint rechts vom Icon, und der Name wird getippt, zum Beispiel "Brand Name" (ersetze es durch deine Marke). Bei 18,15 s fährt der Slogan darunter hinein, zum Beispiel "Your tagline here" (ersetze ihn durch deinen). Der Cursor blinkt dreimal im Takt und verschwindet bei 19,9 s. Halte das Lockup bis zum Ende. </structure> <composition> Hintergrund: eine fast schwarze radiale Vignette, #0D0B1E in der Mitte, dunkler werdend zu #040308 in den Ecken. Palette: - Tiefes Tintenblau #1C0B5D für die Icon-Platte. - Pink #FB2D89 als Hauptakzent. - Orange #FE9117. - Weiß #FFFFFF. - Helles Lavendel #E9E4F2 und #F0EDFF für Linien und weichen Text. - Violett #7C6CF2 nur im Hintergrundglühen. Das Logo bleibt in flachen Farben ohne Verläufe. Drahtgitter: Linien in Lavendel #E9E4F2 bei 60 % Deckkraft, 1,3 px dick; Eckpunkte in #F0EDFF mit 2,6 px Radius. Icon-Platte: ein Kreis mit 676 px, der zu einem abgerundeten Quadrat mit 24 % Eckenradius und weichem Schlagschatten wird. Schrift: der Name in einer fetten Grotesk (Golos Text 700, etwa 155 px, weiß). Der Slogan steht darunter in einer leichten Grotesk (Onest 400, etwa 49 px, Lavendel bei 74 % Deckkraft). Cursor: ein pinker Balken #FB2D89, 10 x 128 px, mit weichem pinkem Glühen. Das finale Lockup (Icon links, Name und Slogan rechts) ist als Ganzes im Bild zentriert. </composition> <techniques> Zoom: Der Anfang liegt auf einem sehr langsamen Zoom-in um die Bildmitte, von Skalierung 0,886 bei 0 s auf 0,998 bei 11 s, danach still. Drahtgitter zeichnen: Jede Linie wächst linear von ihrem früheren zu ihrem späteren Eckpunkt in 0,08–0,45 s. Ein kleiner Punkt blendet an jedem Eckpunkt ein, wenn eine Linie ihn erreicht. Einflug: Jedes Stück besteht aus ein bis drei Dreiecken. Es kommt schnell auf einer gebogenen Bahn herein und bremst in etwa 0,5 s in seine Position ab, wobei es in 3D taumelt. Drehung, Flip und Neigung laufen sanft auf null aus. Im Flug ist es auf etwa 60 % abgedunkelt und leicht weich; bei der Landung ist es scharf und voll beleuchtet. Jedes Dreieck zeigt genau seinen Teil des flachen Logos, sodass der fertige Aufbau nahtlos ist. Glühen: Ein schwaches pinkes Glühen #FB2D89 unter 10 % Deckkraft, das in Violett #7C6CF2 übergeht, wächst hinter dem Logo, während es sich füllt. Blitz bei 14,38 s: - Ein pink-malvenfarbener Lichtausbruch im Screen-Modus flammt um das Logo auf und verblasst über 0,8 s. - Ein dünner, warm-orangefarbener Ring, 7 px, startet bei 300 px Radius und rast mit konstanter Geschwindigkeit in 0,38 s aus dem Bild. - Das Logo blitzt hell auf und beruhigt sich in 0,3 s. Platte: 0,1 s nach dem Schlag wächst die #1C0B5D-Platte in 0,21 s (Sine Ease-out) von einem Punkt zum 676-px-Kreis. Zuerst ist sie beleuchtet, dann werden ihre Ecken auf 24 % Radius eckig. Gleiten: Das Icon skaliert in 0,415 s (power3 ease-in-out) auf etwa 42 % und wandert ins linke Drittel. Bei höchster Geschwindigkeit wird es bis 7 px unscharf und landet scharf. Danach wächst es sehr langsam weiter, etwa 3 % in fünf Sekunden. Tippen: ein Buchstabe pro Sechzehntelnote der Musik (0,156 s bei 96 BPM). Jeder Buchstabe blendet in 0,05 s ein, während der Cursor ihm nachspringt. Slogan: er fährt in etwa 0,2 s von links nach rechts ein, Zeichen für Zeichen. </techniques> <music> Ein Instrumental mit 96 BPM, hoffnungsvoll und modern, genau 21 Sekunden lang. - Anfang: ein sanftes Spieluhr-Glockenspiel über warmen Pads. - Um 4,4 s: ein volles, beschwingtes Arrangement setzt ein (Schlagzeug, Bass, Streicher, eine helle Glockenspiel-Linie). Ein Filter öffnet sich über zwei Takte und steigert sich bis zum Blitz. - 14,38 s: ein Beckenschlag und ein großer Akkord landen genau auf dem Blitz. - Nach dem Drop: die Spieluhr kehrt über gehaltenen Pads unter dem Lockup zurück und verklingt bei 21 s in Stille. Halte alles im Taktraster, damit das Tippen und das Cursor-Blinken auf Sechzehntel und Schläge fallen. </music> <sound> Soundeffekte über der Musik: - Ein weicher Riser in die erste Dreiecks-Landung. - Ein Riser in den Blitz, dann ein tiefer Boom und ein leichter Glas-Impact darauf. - Ein kurzes Whoosh, wenn der Ring hinausrast, und ein weiteres, wenn das Icon gleitet. - Ein leises Tastenklicken für jeden getippten Buchstaben und ein schwaches, wenn der Slogan erscheint. Kein Voice-over. Gesamtlautstärke etwa -14 LUFS, True Peak unter -1 dBTP. </sound> <references> Ein hochwertiger Tech- oder App-Launch-Logo-Sting: ein Aufbau vom Low-Poly-Drahtgitter zum Vollkörper im Stil eines 3D-Facettenaufbaus, auf dem Drop in einen App-Icon-Reveal entladen, mit einem terminalartig getippten Namens-Lockup. </references>

Einmal verwendet

Vorschau des Prompts „Beat-synchronisiertes Motion-Design-Showreel“

Beat-synchronisiertes Motion-Design-Showreel

<direction> Erstelle ein 15-sekündiges Motion-Design-Showreel für [your brand], 1920x1080 im Querformat bei 60 fps, komplett gezeichnet: animierte Schrift, Formen, Partikel, eine 3D-Punktwolke und ein Dashboard, kein Filmmaterial. Die Idee: ein schnelles Produkt-Reel, in dem jeder Szenenwechsel auf einen House-Beat mit 128,57 BPM fällt. Ein Beat dauert genau 28 Frames (0,4667 s), jeder Schnitt sitzt auf diesem Raster, und der erste große Hit landet bei 1,867 s (Beat 4). Der Look wechselt zwischen fast schwarzen und hellen lavendelweißen Szenen, mit Hot Pink als Hauptakzent sowie Violett und Orange. Titel nutzen eine fette Grotesk, Bildunterschriften eine Mono, und das Statement eine kursive Serife. Ein Rahmen im Broadcast-Stil liegt bis zu einem finalen Glitch über dem ganzen Reel. Verwende mein Logo-Zeichen auf der Endkarte und ersetze jeden zitierten Text durch meine eigenen Worte, jeweils etwa gleich lang, damit das Layout hält. Vermeide Fotos, Stock-Footage, weiche generische Überblendungen und alles, was vom Beat-Raster abdriftet. </direction> <structure> 1. 0–1,85 s, Intro auf Fast-Schwarz. Eine dünne Lineal-Linie (1440 px breit, hell bei 22 % Deckkraft) wächst bei 0,34 s aus ihrer Mitte (expo.out, 0,65 s), dann erscheinen 13 Striche von links nach rechts, je einen Frame auseinander. Ein pinker 80-px-Ball fällt von links oben herein und driftet zur Mitte (power2.out, 1,25 s). Er springt dreimal auf dem Lineal, wird bei jedem Aufprall gestaucht und bei jedem Fall gestreckt, mit leichter Bewegungsunschärfe bei hoher Geschwindigkeit. Unter dem Lineal tippt sich eine Mono-Zeile ein, ein Zeichen alle 1,56 Frames, gefolgt von einem blinkenden Blockcursor (Beispiel "no keyframes.", ersetze es durch deinen Text). Bei 1,28 s wird der Ball auf 0,8x gestaucht und schwillt dann auf einer Expo-in-Kurve an, bis er das Bild um 1,82 s pink füllt. 2. 1,82–3,70 s, vier Wörter, eines pro Beat. Jedes fette 300-px-Wort steht auf eigenem Hintergrund mit einer Mono-Kommentarzeile darunter (Beispiele "// describe your idea", "// live preview", "// refine in words", "// mp4 export"). Dahinter laufen oben und unten zwei Reihen umrandeter 205-px-Kopien der vier Wörter mit 760 px/s in entgegengesetzte Richtungen. Die Konturen sind in der Schriftfarbe der Szene mit 7–14 % Deckkraft gezogen. - Wort 1 (Beispiel "DESCRIBE"), tiefes Indigo auf Pink: das Wort landet von 1,39x Skalierung mit expo.out (0,33 s), während seine Buchstaben 0,03 s versetzt mit schnellem Entschärfen der Unschärfe erscheinen. - Wort 2 (Beispiel "PREVIEW"), hell auf Fast-Schwarz bei 2,333 s: die Laufweite schließt sich von 150 px auf eng mit expo.out (0,45 s), Einblenden über 3 Frames. - Wort 3 (Beispiel "REFINE"), violett auf der hellen Seite bei 2,8 s: Buchstaben steigen 340 px hinter einer Maskenlinie 40 px unter der Grundlinie mit back.out(2.2) auf, je 0,3 s, 0,035 s versetzt. - Wort 4 (Beispiel "EXPORT"), hell auf Violett bei 3,267 s: Buchstaben poppen auf 1/32-Noten auf (3,5 Frames Abstand), jeder von 0,6x zu einem 1,13x-Hüpfer 50 px hoch, dann beruhigt er sich. 3. 3,46–4,02 s, Streifen-Wipe. Acht vertikale 240-px-Streifen, abwechselnd pink und helle Seite, steigen von unten auf (power2.inOut, 0,18 s, 0,7 Frames versetzt, links zuerst). Sie halten, steigen dann weiter nach oben und hinaus und enthüllen von unten die nächste Szene. 4. 3,70–5,60 s, Formen auf Fast-Schwarz. Ein 120-px-Raster aus kleinen gedämpften abgerundeten Quadraten (ein Fünftel sind Umrisse) mit winzigen Kreuzen dazwischen. Bei jedem Beat (3,73, 4,2, 4,67 und 5,13 s) geht eine Welle mit 2000 px/s von der Mitte aus. Wo ihre Front vorbeizieht, wächst jede Zelle von 42 auf 74 px, rundet sich zum Kreis, dreht sich um 38 Grad und wird pink. Die erste Welle enthüllt das Raster, und das Raster dreht sich langsam gegen den Uhrzeigersinn, immer schneller. Nach der letzten Welle leeren sich die Zellen und blenden bis 5,47 s aus. 5. 5,55–7,42 s, Partikel. Ein weißer Blitzpunkt mit dünnem Schockring erscheint bei 5,62 s, dann platzen 7000 winzige Quadrate aus der Mitte. Sie sammeln sich zu einem riesigen 590-px-Wort (Beispiel "IDEA"), über seine Breite von Orange über Lavendel zu Violett gefärbt und um einen Pixel flimmernd. Ab 7,0 s strömen sie mit Schweifen nach rechts davon, der linke Teil des Wortes zuerst. Ein weiches rosa radiales Leuchten liegt dahinter. 6. 7,42–9,45 s, 3D auf tiefindigofarbenem radialem Hintergrund. Eine Fibonacci-Kugel aus 1700 Punkten (Radius 362 px) dreht sich langsam über einem perspektivischen Boden aus dünnen violetten Linien, dessen Reihen auf den Betrachter zukriechen. Punkte sind pink oder violett, vorne größer und heller. Ab 8,12 s wandert jeder Punkt an seinen Platz auf einem (2,3)-Torusknoten (cubic in-out, zufällige Verzögerungen bis 0,16 s), und der Knoten dreht sich weiter. 7. 9,08–9,65 s, ein zweiter Streifen-Wipe wie in Szene 3, in Violett, Pink und heller Seite. 8. 9,27–11,1 s, Dashboard auf der hellen Seite mit schwachen vertikalen Hilfslinien. - Schritte: drei Zeilen mit fetten 180-px-Schrittnummern zählen mit expo.out hoch ("01", "02", "03", die dritte in Pink) mit Mono-Beschriftungen (Beispiel "PICK A TEMPLATE"). Jede Zeile steigt in ihre eigene beschnittene Box, 0,08 s versetzt. - Karte: eine weiße Karte (880x740, 26 px Eckenradius, weicher Indigo-Schatten) hebt sich 90 px ein (power3.out, 0,45 s). Sie enthält einen fetten kleingeschriebenen Titel, eine kleine "LIVE"-Pille und einen Ring, der sich mit power3.out füllt, mit einem kurzen Label darin. - Diagramm: vierzehn orangefarbene Balken wachsen von der Basis, 0,031 s versetzt, der letzte vollflächig pink. Eine violette Linie zeichnet sich mit sine.inOut (0,72 s) darüber, mit einem Punkt, einem Halo und einem dunklen Tag an ihrer Spitze (Beispiel "No keyframes"). 9. 10,96–11,45 s, Balken-Wipe. Acht horizontale Bänder, abwechselnd fast schwarz und pink, fegen von links herein (power3.inOut, 0,2 s, je einen Frame versetzt, oben zuerst) und ziehen nach rechts hinaus. 10. 11,07–13,07 s, Statement auf Fast-Schwarz. Vier Bündel aus je 28 haarfeinen Linien fließen als Bänder, additiv gemischt, durchs Bild: Pink zu Orange oben, dann Pink zu Violett, Violett und Violett zu Pink unten. Ein zweizeiliges Statement in 290-px-kursiver Serife erscheint Buchstabe für Buchstabe. Jeder Buchstabe bewegt sich 36 px nach oben und verliert über 0,16 s die Unschärfe, 0,02 s versetzt in Zeile eins und 0,035 s in Zeile zwei. Zeile eins ist hell und beginnt bei x 334 (Beispiel "Ideas in"); Zeile zwei ist pink und endet bei x 1438 (Beispiel "motion."). 11. 12,73–13,07 s, Glitch. Schriftscheiben springen seitwärts, das Bild invertiert zweimal, kleine violette, gelbe und pinke Blöcke flackern, und die Schrift spaltet sich in Pink und Türkis. Der Broadcast-Rahmen und seine Zähler verschwinden. 12. 13,07–15,0 s, Endkarte auf Fast-Schwarz. - Ein blasser Blitz klingt ab (0,26 s). - Eine fette 260-px-Wortmarke ("[your brand]") steigt Buchstabe für Buchstabe hinter ihrer Grundlinie auf (back.out(1.6), 0,32 s, 0,05 s versetzt). - Mein Logo-Zeichen fällt von oben wie der Ball im Intro herein, wird bei 13,51 s beim Aufprall gestaucht und setzt sich als Schlusspunkt der Wortmarke. - Eine dünne Linie zeichnet sich unter dem Lockup (power3.out, 0,3 s). - Eine weit gesperrte Mono-Zeile entschlüsselt sich darunter von verwürfelten pinken Zeichen zu hellen Buchstaben (13,76–14,6 s). - Ein pinker kursiver Serifen-Call-to-Action blendet bei 14,33 s ein (Beispiel "try it free."). - Am unteren Rand blendet eine gedimmte Reihe aus vier kurzen Features ein. Halte die Endkarte bis 15 s. </structure> <composition> - Palette: - Fast-Schwarz #0D0B1E für dunkle Hintergründe. - Tiefes Indigo #1C0B5D für dunkle Schrift und die 3D-Szene. - Helle Seite #FAF9FF für helle Hintergründe und helle Schrift. - Lavendel #F0EDFF für weiche Flächen. - Gedämpft #6B6385 für Beschriftungen und #E9E4F2 für Linien. - Akzente: Haupt-Pink #FB2D89, zweites Violett #7C6CF2, warmes Orange #FE9117, dazu Weiß. - Gelb #FFD23F und Türkis #2DD4B0 nur als Glitch-Sprenkel. - Wenn ich Markenfarben angebe, setze sie nach Rolle ein. - Schriften: Roboto Flex in Stärke 900 mit enger Laufweite (-0,035 em) für alle Titel. JetBrains Mono für den Rahmen, Beschriftungen und Kommentarzeilen. Instrument Serif Italic für das zweizeilige Statement und den Call-to-Action. - Eine weiche seitliche Vignette, nur an den Rändern links und rechts dunkler: etwa -8 % in der Randmitte und -12 % in den Ecken. - Ein Rahmen im Broadcast-Stil über allem bis zum Glitch: - 26-px-Eckklammern. - Ein Titel oben links (Beispiel "[YOUR BRAND] / YOUR TAGLINE"). - Ein laufender Timecode oben rechts (00:00:SS:FF bei 60 fps). - Der aktuelle Kapitelname unten links. - Ein Frame-Zähler "NNN / 900" mit einem 300-px-Fortschrittsbalken unten rechts. - Jeder Teil ist hell bei 0,9 Deckkraft im Exclusion-Mischmodus, sodass er auf hellen Szenen dunkel und auf Pink oder Violett getönt wird. Der Rahmen blendet bei 0,3 s ein. </composition> <techniques> - Jeder Szenenwechsel sitzt auf dem 28-Frame-Beat-Raster. Szenen und Wipes überlappen um einige Frames, sodass nie ein Frame leer ist. - Variiere die Übergänge: der Ball, der in den nächsten Hintergrund anschwillt, harte Farbschnitte zwischen den vier Wörtern, vertikale Streifen-Wipes, ein horizontaler Balken-Wipe, ein Blitz mit Schockring und ein RGB-Split-Glitch in die Endkarte. - Gib dem Ball und dem Logo-Zeichen physische Bewegung: Stauchen beim Aufprall, Strecken im Fall, leichte Bewegungsunschärfe bei Tempo. - Nutze durchgehend Buchstabe-für-Buchstabe-Auftritte, jedes Wort mit eigener Easing-Kurve (expo.out-Landungen, back.out-Aufstiege aus einer Maske, Pops auf 1/32-Noten), wobei die Buchstaben beim Eintreffen scharf werden. - Halte alles scharf und vektorbasiert: Partikel, Punkte und Linien sind winzig und klar, und die Glows bleiben weich und hinter der Schrift. </techniques> <music> Erstelle ein originales House-Bett mit 128,57 BPM, exakt 15 s lang, auf das Beat-Raster gelegt. - Intro: ein luftiger Pad mit blubbernden Plucks. - Ab dem Hit bei 1,867 s: der volle Groove mit Four-on-the-Floor-Kick, Claps, Hats und Sidechain-Bass. - Ende: ein Riser und Glitch in einen großen finalen Hit bei 13,07 s, dann klingt der Schlussakkord bis 15 s aus. </music> <sound> Füge über dem Bett für den Schnitt komponierte Hits hinzu: - ein Riser in einen Boom beim Fill bei 1,867 s - kurze Whooshes mit Spitze auf jedem Wortschnitt und jedem Wipe - weiche Klicks auf den Formwellen - ein kleiner Boom und ein Glas-Tick beim Partikelblitz - ein Streak-Whoosh, wenn die Partikel abziehen - ein Sub-Drop in die 3D-Szene - ein Riser und digitale Glitch-Ticks in den finalen Boom bei 13,07 s - eine Glocke, wenn das Logo-Zeichen bei 13,51 s landet Kein Voice-over. Mix auf etwa -14 LUFS, True Peak unter -1 dBTP. </sound> <references> Ein Tech-Produktlaunch-Showreel im Stil schicker animierter Marken-Reels: ein Broadcast-HUD-Overlay, kinetische Typografie, generative Partikel, eine rotierende 3D-Punktwolke und ein sauberes UI-Dashboard. </references>

Newsletter

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

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

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