il tuo motion designer AI

IT

Apri l’app beta

Simple Motion

Showreel ipnotico con tuffo in un occhio in synthwave neon

Un reel psichedelico interamente disegnato: un occhio si apre, la camera si tuffa nella pupilla in un tunnel di occhi, una massa cromata e una spirale, poi atterra su un titolo.

Pubblicato 10 novembre 2026

Il prompt si apre nell’app: aggiungi i tuoi materiali e l’agente crea il video.

Segnala questo prompt

Usa con il tuo agenteNel tuo agente

Concept

Crea uno showreel di motion graphics psichedelico e ipnotico di 20 secondi, 16:9 a 1920x1080 e 60 fps. Tutto è disegnato e generato: pattern procedurali e forme renderizzate in 3D, niente filmati e niente foto. Montalo su una traccia synthwave neon a 120 BPM. L'idea: un occhio si apre da una sola linea, e la camera continua a tuffarsi attraverso di esso in mondi sempre più strani prima di atterrare su un titolo. Ogni fotogramma è guidato dal tempo. Le sezioni cambiano sulle battute (ogni 2 s) dietro lampi bianchi, e impulsi di luminosità sui battiti mantengono l'immagine viva. Lo stile è inchiostro profondo e quasi nero con rosa neon, arancione, viola, turchese e giallo, bloom morbido, leggera aberrazione cromatica, grana fine e vignettatura, con un sottile HUD tecnico che incornicia tutto. Tutte le parole tra virgolette sono esempi da sostituire con le tue; mantieni lunghezze simili perché il layout regga. Evita filmati e immagini stock, riempimenti piatti senza texture, nero puro (i toni scuri mai sotto #0D0B1E), colori sovrasaturi e qualsiasi nome o marchio reale sullo schermo.

Struttura

0,0–4,0 s, l'occhio. Nero, poi a 0,3 s compare una sottile linea di ciglia luminosa. L'occhio è una mandorla appuntita: la forma di lente tra due cerchi sovrapposti, larga circa 0,55 della larghezza del fotogramma. L'intero fotogramma intorno si riempie delle sue linee di contorno, che sono isolinee della stessa forma a due cerchi a passi logaritmici (ogni intervallo circa il 13% più largo del precedente). Scorrono lentamente verso l'esterno e svaniscono con la distanza: lavanda pallido, arancione e turchese vicino all'occhio, rosa più lontano, su bande di inchiostro profondo. Da 0,3 a 0,85 s l'occhio è una fessura. Da 0,85 a 1,33 s le palpebre si aprono (power2.out) mentre l'occhio cresce dall'86% alla dimensione piena. L'iride è fibrosa, in bande arancione, pesca, menta e viola, con un anello rosa sul bordo, un bagliore turchese e un riflesso ad anello in alto a sinistra; le palpebre hanno un morbido bordo interno bianco. Increspature a tempo percorrono le linee a 1,5, 1,75, 2,5 e 2,75 s. Una didascalia centrata in piccolo monospazio con spaziatura tra le lettere («YOUR LINE OF TWENTY-SIX LETTERS») si decodifica da 1,4 s a circa 45 lettere al secondo e si disgrega da destra a 2,8–3,1 s. Da 2,75 s la pupilla si dilata e mostra la scena successiva già in corso al suo interno, mentre le bande dell'iride passano al viola e al giallo. Da 3,42 a 3,98 s la camera avanza nella pupilla finché la scena interna riempie il fotogramma a 1:1.
4,0–8,0 s, il tunnel. Stacco su un lampo bianco con raggi radiali. È un tunnel prospettico di anelli distanziati in modo che il raggio inverso cresca di 0,75 per anello. Ogni anello contiene 18 occhi a mandorla con contorni turchesi, iridi rosa e viola e un riflesso bianco. Gli anelli alterni sono sfalsati di mezza cella e girano in senso opposto. Gli anelli volano verso l'esterno a circa 11 anelli al secondo con una spinta su ogni battito, e gli anelli lontani si sciolgono in una foschia d'inchiostro attorno a un nucleo bianco. A ogni battito un anello luminoso lascia il nucleo e cresce, a turno bianco, rosa, poi turchese. Da 6,05 a 6,45 s gli occhi si trasformano in una scacchiera polare, poi in un sunburst di 36 raggi che girano lentamente in colori arcobaleno spenti, con un anello luminoso attorno al centro che si gonfia dopo 7,0 s. Da 7,45 a 7,8 s la scacchiera lampeggia di nuovo, e da 7,72 a 7,97 s tutto va in bianco.
8,0–11,33 s, la massa cromata. Il bianco svanisce in 0,5 s rivelando una metaball cromata iridescente sopra scure increspature concentriche. Sono sei sfere in un'unione liscia: un corpo scuro con sottili bande di contorno a macchia d'olio in turchese e rosa, una luce di bordo rosa e nitidi riflessi speculari bianchi. Gira e si trasforma. Una catena verticale si raccoglie in un grumo, due goccioline si staccano a 9,1–9,5 s, e si accartoccia a 9,5–9,9 s. Da 10,0 s il fotogramma diventa un caleidoscopio che passa per 4, 6, 3, 8 e poi 10 pieghe a specchio, e un arco pallido si sposta verso l'esterno a 10,0–10,25 s.
11,33–14,0 s, la spirale. Un lampo glitch, poi dodici bracci di spirale logaritmica di celle a goccia. Ogni cella è 1,5 volte la precedente lungo il suo braccio, e i bracci girano in senso antiorario verso l'esterno. Le celle hanno doppi contorni lavanda e contengono o un'iride (turchese, rosa o arancione) o un rombo sfumato annidato (rosa o viola). Sottili linee dorate tracciano i bracci e gli anelli, e un nucleo bianco brilla al centro. La spirale zooma verso il centro a circa 1 unità logaritmica al secondo e gira lentamente; entrambi i movimenti ricevono una spinta su ogni battito, con un impulso di luminosità su ogni battito. Da 13,82 a 14,0 s un bloom bianco cresce dal centro fino a riempire il fotogramma.
14,0–15,5 s, la stanza delle sfere. Il bianco svanisce in 0,7 s in una stanza 3D. Gli archi sono fatti di perline simili a perle, grandi sfere iridescenti costeggiano le pareti, e dischi piatti sul pavimento portano strisce op-art a zigzag in arcobaleno pastello, il tutto in nebbia viola inchiostro. La camera avanza in carrellata e si inclina a destra.
15,5–16,0 s, montaggio sulle semicrome (stacchi a 15,5, 15,633, 15,75 e 15,883 s): un primo piano dell'iride, i raggi, il caleidoscopio e la spirale, ciascuno con un piccolo lampo.
16,0–18,0 s, di nuovo l'occhio. Un lampo bianco con un disco scuro al centro che si restringe fino a nulla in 50 ms. La camera arretra dalla pupilla, con la stanza delle sfere visibile al suo interno, fino all'occhio intero a 16,32 s. Ora le linee di contorno sono spesse bande neon: rosa vicino all'occhio, poi viola, poi inchiostro profondo più lontano, che diventa turchese a 16,9–17,8 s. L'iride è un anello arcobaleno pastello attorno a una grande pupilla scura. Impulsi a tempo cadono a 16,5, 17,0 e 17,5 s. Da 17,84 a 17,98 s l'occhio si chiude in un battito di ciglia: le bande si raddrizzano in strisce orizzontali con una linea luminosa al centro. A 18,0 s tutto collassa nel buio in 50 ms.
18,1–20,0 s, il titolo. Una parola nel largo grottesco nero («YOUR WORD») viene adattata a circa 1436 px di larghezza e centrata. Entra con un wipe da sinistra a destra con bordo morbido e sfocato in 0,52 s. Le sue lettere sono pallide (lavanda, menta, poi rosa tenue da sinistra a destra) e riempite di grana, con una separazione rosso/blu che si assesta da 10 a 3 px e un bagliore tinto di viola, turchese e rosa. A 18,62 s sotto compare in dissolvenza un sottotitolo in corsivo («your short tagline»). A 19,1 s sopra si decodifica una minuscola riga monospazio con spaziatura tra le lettere («( a short call to action )»). Da 19,55 a 19,95 s la parola si dissolve in rumore e il fotogramma sfuma.

Composizione

Palette: inchiostro profondo #1C0B5D e quasi nero #0D0B1E per ogni area scura (sfondi, bande, il bianco dell'occhio). Gli accenti sono rosa #FB2D89 (principale), arancione #FE9117, viola #7C6CF2, turchese #2DD4B0, giallo #FFD23F e bianco #FFFFFF. Usa lavanda chiaro #F0EDFF / #FAF9FF per le tinte pallide e il testo, lavanda spento #9890B4 per il testo piccolo dell'HUD e #E9E4F2 per le linee. Gli elementi arcobaleno alternano rosa, viola, turchese, giallo, arancione.
Grading su tutto: bloom morbido sulle forme luminose (soglia circa 0,7), leggera aberrazione cromatica radiale verso gli angoli, grana fine, una vignettatura e saturazione leggermente smorzata. I toni scuri mai sotto #0D0B1E.
Font: Unbounded 900 (un grottesco nero molto largo) per il titolo, JetBrains Mono 400/700 a 11–15 px con spaziatura di circa 0,3 em per l'HUD, e Spectral Italic 400 a circa 43 px per il sottotitolo.
HUD: sta sopra a tutto da 1,0 s, appare in 0,5 s e svanisce a 19,6–19,9 s. Sottili parentesi d'angolo a forma di L si trovano a 28 px da ogni angolo.

In alto a sinistra: un nome in monospazio grassetto («YOUR NAME») con uno slogan sotto («YOUR TAGLINE»).
In alto a destra, allineato a destra: un contatore di capitoli («01 / 07») e un'etichetta di capitolo in grassetto («FIRST CHAPTER»), che cambiano a ogni sezione.
In basso a sinistra: un timecode «TC 00:00:SS:FF» che conta i fotogrammi a 60 fps, e «120 BPM · bar.beat.sixteenth» (per esempio 02.3.3).
In basso a destra: quattro quadrati da 8 px con il battito corrente illuminato di bianco, e un breve credito in grassetto (per esempio «YOURSITE.COM»).
Una linea di avanzamento da 1,5 px corre tra le parentesi in basso e si riempie con la testina di riproduzione.

Tecniche

Decodifica del testo: all'inizio di ogni sezione il contatore e l'etichetta del capitolo si decodificano lettera per lettera in 0,38 s. Ogni lettera scorre tra glifi come # % & = + @ < | / $ a 30 cambi al secondo e si risolve da sinistra a destra. La didascalia e la call to action usano la stessa decodifica, e la didascalia si disgrega da destra allo stesso modo.
Lampi di sezione: ogni lampo bianco con raggi radiali decade come 0.94 / (1 + (t / 0.07)^2.5).
Spinta nella pupilla (3,42–3,98 s): lo zoom accelera in modo esponenziale, con zoom logaritmico = 5.5·x² / (x + 0.1) lungo il movimento. La scena successiva gira dentro la pupilla e finisce esattamente a 1:1, così lo stacco è senza giunture. L'allontanamento a 16,0 s lo rispecchia.
Spinte a tempo: la velocità del tunnel, lo zoom e la rotazione della spirale, e le increspature e gli anelli ricevono un colpo su ogni battito, con impulsi di luminosità sui battiti.
Morph al posto degli stacchi dentro le scene: occhi in scacchiera in sunburst, la catena della metaball in grumo in goccioline in accartocciamento, poi i numeri di pieghe del caleidoscopio 4, 6, 3, 8, 10.
Transizioni: bianchi totali e dissolvenze dal bianco sulle battute, un lampo glitch nella spirale, un bloom bianco dal centro nella stanza delle sfere, stacchi lampo sulle semicrome nel montaggio, un collasso nel buio di 50 ms prima del titolo.
Titolo: un wipe da sinistra a destra con bordo morbido, una separazione RGB che scende da 10 a 3 px, poi una dissoluzione in rumore e una dissolvenza alla fine.

Musica

Synthwave neon a 120 BPM in la minore, un accordo per battuta (2 s): Am F per l'intro, poi Am F C G Am, F nel breakdown, G al ritorno, Am alla fine. La cassa cade esattamente sui battiti dell'immagine (ogni 0,5 s).

0–4 s: una figura di campana in ottavi su un pad caldo, con un lungo riser e un piatto invertito, senza batteria.
A 4,0 s: una cassa four-on-the-floor, un basso in ottavi con salti d'ottava e un arpeggio a dente di sega in sedicesimi. Il basso e l'arpeggio pompano con la cassa.
Da 8,0 s: un grande rullante con riverbero su due e quattro, hi-hat in controtempo e un lead square con note lunghe, con un fill di rullante verso 14,0 s.
14,0–16,0 s: batteria e basso escono, il pad si gonfia, e un arpeggio filtrato sale con un rullo di rullante in trentaduesimi verso 16,0 s.
A 16,0 s: tutto rientra di colpo.
La batteria si ferma mezzo battito prima di 18,0 s, e un unico accordo risonante di la minore add9 regge la schermata finale.

Suono

Effetti sonori sull'immagine:

un morbido seno acuto a 0,3 s per la linea delle ciglia
un riser in un boom profondo a 4,0 s
un breve riser e boom a 8,0 s
un glitch a 11,33 s
un riser e whoosh verso 14,0 s
quattro brevi tick glitch sugli stacchi del montaggio
un lungo riser in un boom a 16,0 s
un whoosh sul battito di ciglia a 17,95 s
un downer e sub drop a 18,0 s
una campana morbida quando il titolo appare a 18,12 s
un whoosh arioso mentre il titolo si dissolve
Niente voce fuori campo. Mix a circa −14 LUFS, con true peak sotto −1 dBTP.

Riferimenti

Colori outrun e synthwave della fine degli anni '80, moiré op-art e illusioni di linee di contorno, immaginario psichedelico di occhi, showreel procedurali in stile demoscene e reel di studi di motion design incorniciati da un HUD tecnico.

Gli accorgimenti di motion design con cui è costruito il video, ognuno con codice autonomo da aprire nel browser o da passare al tuo agente.

Anteprima della tecnica “Occhio a mandorla appuntita con linee di contorno a passo logaritmico” — A 0:02 nel video

Forme

Occhio a mandorla appuntita con linee di contorno a passo logaritmico

Un occhio disegnato in un solo fragment shader: le palpebre sono la lente tra due cerchi (punte a ±0.53, semialtezza di 0.237 dell'altezza del frame), e ogni linea esterna è un'isolinea della stessa distanza dai due cerchi, quindi le linee restano appuntite e diventano strisce orizzontali dritte quando l'occhio si chiude. Le linee seguono passi logaritmici (ogni intervallo circa il 13% più largo) e la loro fase scorre verso l'esterno; un'iride fibrosa (70 onde angolari contorte) in bande pesca, menta e viola, un riflesso ad anello e un morbido bordo interno completano l'insieme. Le palpebre si aprono come una fessura (0.3 s) e poi con power2.out in 0.48 s.

Quando usarla Una forma hero ipnotica che può aprirsi, sbattere e chiudersi in linee a tempo.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Occhio a mandorla appuntita con linee di contorno a passo logaritmico</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>

Anteprima della tecnica “Zoom attraverso la pupilla verso la scena successiva” — A 0:03 nel video

Transizione

Zoom attraverso la pupilla verso la scena successiva

La scena successiva è già in riproduzione dentro la pupilla, rimpicciolita in modo da raggiungere esattamente 1:1 quando la pupilla copre il frame (mai ingrandita oltre). La camera zooma in modo esponenziale nella pupilla (ln zoom = 5.5 x^2 / (x + 0.1) in circa 0.55 s) e il taglio cade su un flash bianco che decade come 0.94 / (1 + (t / 0.07)^2.5), con scie radiali ottenute campionando il frame 12 volte verso il centro.

Quando usarla Ogni volta che un mondo deve aprirsi sul successivo attraverso un foro, una lente o un occhio.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zoom attraverso la pupilla verso la scena successiva</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>

Anteprima della tecnica “Tunnel prospettico di anelli di icone” — A 0:05 nel video

Forme

Tunnel prospettico di anelli di icone

Anelli di icone a mandorla posti a profondità 1/r = 0.75 k, che si affollano verso il centro come un vero tubo; 18 icone per anello, con anelli alterni sfalsati di mezza cella e rotanti in versi opposti. Il volo è uno spostamento dell'indice di profondità (circa 11 anelli al secondo), gli anelli lontani si sciolgono in foschia e a ogni battito un anello luminoso lascia il nucleo bianco e cresce con power2.out.

Quando usarla Un attraversamento rapido e infinito per un drop o una sezione ad alta energia.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tunnel prospettico di anelli di icone</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>

Anteprima della tecnica “Spirale log-polare distorta di celle a goccia” — A 0:12 nel video

Forme

Spirale log-polare distorta di celle a goccia

Le celle stanno su 12 bracci di spirale logaritmica (angolo + K ln r costante, K = -1.25) e avanzano di 1.5x verso l'esterno lungo ogni braccio; ogni cella è disegnata nel riferimento del proprio braccio, così gocce, iridi e rombi seguono la spirale con doppi contorni. Lo zoom verso il centro è uno spostamento di ln r (circa 1 al secondo) e la rotazione è uno spostamento dell'angolo; entrambi ricevono una piccola spinta a ogni battito.

Quando usarla Un vortice ipnotico che riporta sempre lo sguardo al centro.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spirale log-polare distorta di celle a goccia</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>

Anteprima della tecnica “HUD che tiene il tempo e decodifica le sue etichette” — A 0:04 nel video

Tipografia

HUD che tiene il tempo e decodifica le sue etichette

Una cornice in stile broadcast in piccolo carattere mono spaziato: parentesi d'angolo, nome e tagline, un contatore e un'etichetta di sezione che si decodificano lettera per lettera (ogni lettera si risolve da sinistra a destra in 0.38 s, scorrendo tra i glifi 30 volte al secondo), un timecode in frame a 60 fps, battuta.movimento.sedicesimo a 120 BPM, quattro quadrati dei battiti e una linea di avanzamento.

Quando usarla Per incorniciare un reel o uno showreel con capitoli, tempo e orologio in corsa.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HUD che tiene il tempo e decodifica le sue etichette</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>

Tipografia

Wordmark con grana luminosa, wipe, split RGB e dissolvenza

La parola viene disegnata una volta in una texture con mipmap; lo shader la legge nitida per le lettere con uno split rosso/blu che si assesta da 10 a 3 px, e a tre livelli di sfocatura per un bagliore tinto di viola, verde acqua e rosa da sinistra a destra. Le lettere sono riempite di grana, entrano con un wipe da sinistra a destra dal bordo morbido e sfocato in 0.52 s e alla fine vengono divorate dal rumore in 0.4 s.

Quando usarla Una end card o un titolo che deve brillare come luce impressa nell'occhio.

Mostra codice

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wordmark con grana luminosa, wipe, split RGB e dissolvenza</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>

Altri prompt

Anteprima del prompt “Showreel matematico vivo con tagli glitch a tempo”

Showreel matematico vivo con tagli glitch a tempo

<direction> Realizza uno showreel di motion graphics di 20 secondi costruito interamente con la matematica: ogni fotogramma è generato dal tempo t in corso, senza foto, filmati o immagini. Orizzontale 1920x1080 a 60 fps. Deve dare la sensazione di uno strumento da laboratorio preciso che diventa all'improvviso bellissimo: scuro, luminoso, esatto, con un taglio glitch ogni due secondi a tempo. Otto scene matematiche si svolgono dentro una cornice fissa in stile strumento (parentesi d'angolo, wordmark, contatore ed etichetta della scena, punto del ritmo, orologio in corsa, linea di avanzamento, equazione dal vivo), poi una schermata finale con il marchio. Evita grana, immagini stock e qualsiasi decorazione che non derivi dalla matematica. </direction> <structure> Tagli a 2, 4, 8, 10, 12, 14, 16 e 18 s, tutti a tempo. 1) 0-2 s, origine: un debole anello turchese cresce dal centro fino a r 238 px (0-0,45 s, ease out); assi con tacche ogni 60 px crescono da un punto centrale luminoso; un anello d'onda lascia il punto a ogni battito. Una riga con ampia spaziatura come "YOUR AI MOTION DESIGNER" si risolve da caratteri casuali (0,3-0,78 s); una breve riga con grazie come "Ideas in motion" viene digitata lettera per lettera accanto all'origine (0,5-1,12 s). Da 1,35 a 1,95 s un arco turchese di r 220 si avvolge una volta attorno all'origine con un punto bianco sulla punta, e le parole sfumano. 2) 2-4 s, circonferenza unitaria: una circonferenza turchese (r 220) a sinistra, con l'angolo che cresce a 4,52 rad/s. Raggio bianco, cateto del coseno turchese, cateto del seno rosa, un arco d'angolo arancione con etichetta θ, una linea rosa tratteggiata fino a un punto rosa a x 820 dove è scritto il seno; la storia dell'angolo si distende a destra come una sinusoide rosa luminosa (104 px per radiante) con una cosinusoide turchese tenue accanto e guide puntinate +1/-1. Valori dal vivo "θ = 4.524 rad" e "sin θ = -0.982". Equazione: y = sin θ. 3) 4-8 s, epicicli di Fourier: una catena di 180 cerchi rotanti (ordinati per dimensione, anelli lavanda tenui, raggi bianchi) disegna il contorno di un grande π in arancione luminoso da 4,3 a 7,2 s (avanzamento sine in-out), poi la forma si riempie con un morbido gradiente da rosa a viola mentre la catena sfuma. A sinistra, uno spettro di |cₙ| per n = -24...24 (altezza delle barre secondo la radice quadrata dell'ampiezza) si accende dal centro verso l'esterno man mano che il disegno procede; valori "K = 180 terms" e "t/2π = 0.527". Equazione: f(t) = Σ cₙ e^{int}. 4) 8-10 s, un nodo di Lissajous 3D (sin 3t, sin 2t, sin 5t) tracciato in 0,6 s, poi ruotante in prospettiva: un nastro il cui colore va da turchese a viola a rosa lungo la curva e la cui larghezza e luminosità seguono la profondità. A destra, una griglia 3x3 di piccole figure di Lissajous piane con etichette 1:1, 2:3, 4:5, 1:2, 3:4, 5:6, 1:3, 3:5, 3:2 si disegna una alla volta con la fase che deriva; l'ultima diventa turchese dentro un riquadro sottile. 5) 10-12 s, una superficie a onde in wireframe z = cos(kr - ωt)/(1 + r) su una griglia 48x48 vista da 67° dall'alto, rivelata dal centro verso l'esterno in 0,55 s e in lenta rotazione, linee colorate in base all'altezza da turchese a viola a rosa. Un punto sonda arancione cavalca la superficie a r = 3.2 con una linea guida e valori dal vivo "r = 3.200", "z = 0.276". 6) 12-14 s, un insieme di Julia z² + c che riempie il fotogramma, aperto da un portale circolare che si espande dal centro con un bordo bianco. c = 0.7885·e^{iα} scorre lungo la sua circonferenza (sine in-out), così il frattale si trasforma da spirali separate in una forma connessa con interno nero; zoom lento e rotazione. Colori in base al tempo di fuga: indaco, viola, rosa, arancione, crema chiaro fino al bianco. Un riquadro mostra c che si muove sulla sua circonferenza con i valori "Re c" e "Im c". 7) 14-16 s, fillotassi: 1500 semi con θₙ = n·137.508°, rₙ = c√n appaiono dal centro verso l'esterno e ruotano, prima bianchi, poi rosa, viola e turchese. A sinistra φ = 1.6180339887... si scrive cifra per cifra, cresce una fila di Fibonacci (21 e 34 in turchese), con "seeds n = 1500" e "spirals 21 ⟲ 34 ⟳". 8) 16-18 s, identità di Eulero: i semi vorticano in un anello che diventa una circonferenza unitaria turchese a sinistra; un punto scorre da 1 a -1 lasciando un arco arancione sopra; e^{iπ} appare grande, poi "+", "1", "=" uno alla volta a tempo, un anello pulsa in -1 e "0" atterra a 18 s in un anello rosa. 9) 18-20 s, schermata finale: l'identità si rimpicciolisce in alto; un grande wordmark con ampia spaziatura come "YOUR BRAND" (sostituiscilo con il tuo) sale lettera per lettera dal basso dentro una maschera (sfasamento di 0,06 s), una sottolineatura turchese-viola-rosa si disegna sotto, una riga spaziata come "IDEAS IN MOTION × [your web address]" si risolve da caratteri casuali e una riga corsiva con grazie "From idea to video in one chat" appare in dissolvenza. Tutto sfuma al nero da 19,35 a 19,95 s. </structure> <composition> Sfondo: un profondo bagliore radiale indaco-nero, centro #10063A che sfuma in #03030A ai bordi, senza grana. Accenti: rosa #FB2D89 (principale), arancione #FE9117, viola #7C6CF2, turchese #2DD4B0 e bianco. Linee ed etichette in grigi lavanda: #9A98A4 per le etichette, #57516F per le didascalie tenui, #433E53 per gli assi. I tratti brillano dolcemente con una sfocatura di 12-16 px del loro stesso colore. Tipografia: equazioni in un serif in stile Computer Modern (Old Standard TT, variabili in corsivo, funzioni in tondo); ogni valore, contatore e didascalia in monospazio (Liberation Mono o simile), piccolo e con ampia spaziatura; il nome del marchio in un grottesco grassetto con spaziatura molto ampia. Una cornice fissa resta per tutto il tempo, comparendo in 0,15-0,9 s: sottili parentesi d'angolo lunghe 27 px, a 47 px da ogni angolo. In alto a sinistra: un wordmark come "YOUR BRAND" (grassetto, 22 px, spaziatura di circa 0,35 em) con una minuscola riga spaziata sotto come "IDEAS IN MOTION · [your web address]". In alto a destra: un contatore di scene "01 / 08" e sotto una breve etichetta per scena, per esempio "DESCRIBE YOUR IDEA", "EDIT IN WORDS", "NO KEYFRAMES", "3D EFFECTS", "LIVE PREVIEW", "SHAPES AND SOUND", "MUSIC TO THE RHYTHM", "MP4 EXPORT" (sostituiscile con i tuoi slogan), con un piccolo punto rosa alla sua sinistra. In basso a destra: un orologio in corsa "t = 03.35 s" (due decimali) e una minuscola riga con il numero del fotogramma. In basso: una linea di avanzamento di 1 px da x 80 a 1840 che si riempie con un gradiente turchese-viola-rosa col passare del tempo, con piccole tacche a ogni confine di scena. In basso a sinistra: l'equazione della scena corrente. </composition> <techniques> Ogni taglio è un glitch di 0,2 s: l'immagine in uscita viene tagliata in bande orizzontali spostate di lato, 3-6 sottili linee a tutta larghezza in turchese, rosa, arancione e bianco sfarfallano, l'intero fotogramma lampeggia di bianco intorno al 14% e decade in 0,25 s, e le etichette della cornice si rimescolano con caratteri casuali per qualche fotogramma. Il punto rosa del ritmo lampeggia forte a ogni battito e decade in mezzo battito. L'equazione della scena compare in dissolvenza 0,1-0,35 s dopo ogni taglio. Valori, orologio e contatori si aggiornano dal vivo con l'animazione. Le righe spaziate si risolvono da caratteri casuali; le righe con grazie vengono digitate lettera per lettera; il wordmark finale sale dal basso dentro una maschera con uno sfasamento di 0,06 s. Tracciati e trasformazioni usano ease-out o sine in-out come indicato per scena. </techniques> <music> Un brano elettronico esaltante a 120 BPM (accordi di pianoforte, pad caldi, basso synth, cassa four-on-the-floor), esattamente 20 s, con ogni taglio che cade su un battito. Morbido e filtrato per i primi due secondi con un riser verso un boom a 2 s, piena energia fino a 16 s, un breakdown filtrato con un riser verso un boom finale a 18 s, poi dissolvenza in uscita entro 20 s. Mix a circa -14 LUFS con true peak sotto -1 dBTP. </music> <sound> Un whoosh morbido e tre tick glitch a ogni taglio, e un whoosh più profondo e un boom quando si apre il portale del frattale a 12 s, il tutto sopra la musica e sulla griglia del ritmo. Nessuna voce fuori campo. </sound> <references> Animazioni matematiche esplicative incrociate con arte generativa di creative coding e un HUD da oscilloscopio o strumento da laboratorio fantascientifico: sottili linee luminose su quasi nero, valori in monospazio, equazioni con grazie da libro di testo. </references>

Assemblaggio del logo low-poly con nome digitato nel lockup

<direction> Realizza un logo reveal orizzontale di 21 secondi, 1920x1080 a 60 fps. Assembla lentamente il mio logo da sfaccettature low-poly e termina su un lockup orizzontale con il nome del mio brand digitato e uno slogan sotto. L'idea: una lunga costruzione tranquilla senza stacchi per quattordici secondi, un rilascio sul drop della musica entro due secondi, poi un finale calmo con il testo digitato. L'aspetto: sfondo quasi nero con una morbida vignettatura circolare, colori del brand piatti e carattere grottesco pulito. Evita sfumature sul logo, giunture visibili tra i triangoli, stacchi durante la costruzione e qualsiasi cosa confusa dietro il logo. </direction> <structure> 1. 0–2,6 s, la struttura wireframe: un wireframe low-poly del contorno del mio logo si disegna da solo dalla base del logo verso l'esterno. Ha circa 35–45 vertici e 90 linee sottili. 2. 1,9–13,3 s, l'assemblaggio: il logo è tagliato in circa 55 triangoli lungo quel wireframe, e volano dentro pezzo per pezzo da fuori inquadratura. Gli atterraggi iniziano lenti alla base del logo e diventano più fitti verso l'alto. L'ultimo pezzo atterra a 13,3 s, e il logo è allora completo ed esatto. Mantieni il logo finito per circa un secondo. 3. 14,38 s, il flash, esattamente sul drop della musica. Un'esplosione di luce, un anello arancione in espansione e un flash luminoso sul logo scattano insieme. 0,1 s dopo il colpo, una piastra color inchiostro profondo cresce dietro il logo e si squadra diventando un'icona app. Mantieni l'icona centrata per un secondo. 4. 15,74–16,15 s, lo scivolamento: l'icona si riduce a circa il 42% e si sposta nel terzo sinistro, facendo spazio al nome. 5. 16,1–21 s, il nome: un cursore rosa appare a destra dell'icona e il nome viene digitato, ad esempio "Brand Name" (sostituiscilo con il tuo brand). A 18,15 s lo slogan scorre dentro sotto di esso, ad esempio "Your tagline here" (sostituiscilo con il tuo). Il cursore lampeggia tre volte a tempo e scompare a 19,9 s. Mantieni il lockup fino alla fine. </structure> <composition> Sfondo: una vignettatura radiale quasi nera, #0D0B1E al centro che scurisce fino a #040308 agli angoli. Palette: - Inchiostro profondo #1C0B5D per la piastra dell'icona. - Rosa #FB2D89 come accento principale. - Arancione #FE9117. - Bianco #FFFFFF. - Lavanda chiaro #E9E4F2 e #F0EDFF per linee e testo morbido. - Viola #7C6CF2 solo nel bagliore dello sfondo. Il logo resta in colori piatti senza sfumature. Wireframe: linee in lavanda #E9E4F2 al 60% di opacità, spessore 1,3 px; punti dei vertici in #F0EDFF con raggio di 2,6 px. Piastra dell'icona: un cerchio di 676 px che diventa un quadrato arrotondato con raggio degli angoli del 24% e una morbida ombra. Testo: il nome in un grottesco bold (Golos Text 700, circa 155 px, bianco). Lo slogan sta sotto in un grottesco leggero (Onest 400, circa 49 px, lavanda al 74% di opacità). Cursore: una barra rosa #FB2D89, 10 x 128 px, con un morbido bagliore rosa. Il lockup finale (icona a sinistra, nome e slogan a destra) è centrato nel suo insieme nell'inquadratura. </composition> <techniques> Push-in: l'apertura si trova su un push-in molto lento verso il centro dell'inquadratura, da scala 0,886 a 0 s a 0,998 a 11 s, poi fermo. Disegno del wireframe: ogni linea cresce linearmente dal vertice precedente a quello successivo in 0,08–0,45 s. Un piccolo punto appare in dissolvenza su ogni vertice quando una linea lo raggiunge. Volo d'ingresso: ogni pezzo è fatto di uno a tre triangoli. Arriva veloce su un percorso curvo e rallenta fino alla posizione in circa 0,5 s, ruotando in 3D. Rotazione, ribaltamento e inclinazione si attenuano fino a zero all'arrivo. In volo è oscurato a circa il 60% e leggermente morbido; all'atterraggio è nitido e completamente illuminato. Ogni triangolo mostra esattamente la sua parte del logo piatto, così l'assemblaggio finito è senza giunture. Bagliore: un debole bagliore rosa #FB2D89, sotto il 10% di opacità e che sfuma nel viola #7C6CF2, cresce dietro il logo mentre si riempie. Flash a 14,38 s: - Un'esplosione di luce rosa-malva in modalità screen divampa attorno al logo e svanisce in 0,8 s. - Un anello sottile arancione caldo, 7 px, parte da un raggio di 300 px e schizza fuori dall'inquadratura a velocità costante in 0,38 s. - Il logo lampeggia luminoso e si assesta in 0,3 s. Piastra: 0,1 s dopo il colpo, la piastra #1C0B5D cresce da un punto fino al cerchio di 676 px in 0,21 s (sine ease-out). All'inizio è illuminata, poi i suoi angoli si squadrano fino al raggio del 24%. Scivolamento: l'icona si scala a circa il 42% e si sposta nel terzo sinistro in 0,415 s (power3 ease-in-out). Si sfoca fino a 7 px alla massima velocità e atterra nitida. Poi continua a crescere molto lentamente, circa il 3% in cinque secondi. Digitazione: una lettera per ogni semicroma della musica (0,156 s a 96 BPM). Ogni lettera appare in dissolvenza in 0,05 s mentre il cursore salta dopo di essa. Slogan: scorre dentro da sinistra a destra in circa 0,2 s, carattere per carattere. </techniques> <music> Un brano strumentale a 96 BPM, speranzoso e moderno, di esattamente 21 secondi. - Inizio: un morbido glockenspiel da carillon su pad caldi. - Intorno a 4,4 s: entra un arrangiamento pieno e vivace (batteria, basso, archi, una linea luminosa di glockenspiel). Un filtro si apre in due battute e cresce verso il flash. - 14,38 s: un colpo di piatto e un grande accordo cadono esattamente sul flash. - Dopo il drop: il carillon ritorna su pad sostenuti sotto il lockup e svanisce nel silenzio a 21 s. Tieni tutto sulla griglia del ritmo così che la digitazione e i lampeggi del cursore cadano su semicrome e battiti. </music> <sound> Effetti sonori sopra la musica: - Un riser morbido verso il primo atterraggio di triangolo. - Un riser verso il flash, poi un boom profondo e un leggero impatto di vetro su di esso. - Un breve whoosh mentre l'anello schizza via, e un altro quando l'icona scivola. - Un morbido clic di tasto per ogni lettera digitata, e uno leggero quando appare lo slogan. Niente voce fuori campo. Volume complessivo circa -14 LUFS, true peak sotto -1 dBTP. </sound> <references> Uno sting di logo premium tech o di lancio app: un assemblaggio da wireframe low-poly a solido nello stile di una costruzione di sfaccettature 3D, rilasciato sul drop in una rivelazione di icona app, con un lockup del nome digitato in stile terminale. </references>

Anteprima del prompt “Showreel di motion design sincronizzato sul ritmo”

Showreel di motion design sincronizzato sul ritmo

<direction> Realizza uno showreel di motion design di 15 secondi per [your brand], 1920x1080 orizzontale a 60 fps, interamente disegnato: testo animato, forme, particelle, una nuvola di punti 3D e una dashboard, nessun filmato. L'idea: un reel di prodotto veloce in cui ogni cambio di scena cade su un beat house a 128,57 BPM. Un beat dura esattamente 28 fotogrammi (0,4667 s), ogni taglio si appoggia su questa griglia e il primo colpo grande cade a 1,867 s (beat 4). Lo stile alterna scene quasi nere e scene chiare bianco lavanda, con il rosa acceso come accento principale più viola e arancione. I titoli usano una grottesca pesante, le didascalie una mono e la dichiarazione una serif corsiva. Una cornice in stile broadcast copre l'intero reel fino a un glitch finale. Usa il mio marchio logo sulla scheda finale e sostituisci ogni testo tra virgolette con le mie parole, mantenendo ognuna di lunghezza simile perché l'impaginazione regga. Evita foto, filmati di repertorio, dissolvenze incrociate morbide e generiche e tutto ciò che esce dalla griglia dei beat. </direction> <structure> 1. 0–1,85 s, intro su quasi nero. Una sottile linea di righello (larga 1440 px, chiara al 22 % di opacità) cresce dal centro a 0,34 s (expo.out, 0,65 s), poi compaiono 13 tacche da sinistra a destra, un fotogramma di distanza. Una palla rosa da 80 px cade dall'alto a sinistra e scivola verso il centro (power2.out, 1,25 s). Rimbalza tre volte sul righello, schiacciandosi a ogni impatto e allungandosi a ogni caduta, con un po' di motion blur ad alta velocità. Una riga mono viene digitata sotto il righello, un carattere ogni 1,56 fotogrammi, seguita da un cursore a blocco lampeggiante (esempio "no keyframes.", sostituiscilo con il tuo). A 1,28 s la palla si comprime a 0,8x, poi si gonfia su una curva expo-in fino a riempire l'inquadratura di rosa a 1,82 s. 2. 1,82–3,70 s, quattro parole, una per beat. Ogni parola pesante da 300 px poggia su un proprio sfondo con una riga di commento mono sotto (esempi "// describe your idea", "// live preview", "// refine in words", "// mp4 export"). Dietro, due file di copie contornate da 205 px delle quattro parole scorrono in alto e in basso a 760 px/s in direzioni opposte. I contorni sono tracciati con il colore del testo della scena al 7–14 % di opacità. - Parola 1 (esempio "DESCRIBE"), indaco profondo su rosa: la parola atterra da una scala di 1,39x con expo.out (0,33 s) mentre le sue lettere compaiono a 0,03 s di distanza con un rapido ritorno alla nitidezza. - Parola 2 (esempio "PREVIEW"), chiara su quasi nero a 2,333 s: la spaziatura si chiude da 150 px a stretta con expo.out (0,45 s), con dissolvenza in 3 fotogrammi. - Parola 3 (esempio "REFINE"), viola sulla pagina chiara a 2,8 s: le lettere salgono di 340 px da dietro una linea di maschera 40 px sotto la linea di base con back.out(2.2), 0,3 s ciascuna, a 0,035 s di distanza. - Parola 4 (esempio "EXPORT"), chiara su viola a 3,267 s: le lettere scattano su note da 1/32 (3,5 fotogrammi di distanza), ognuna da 0,6x a un balzo di 1,13x alto 50 px, poi si assesta. 3. 3,46–4,02 s, tendina a strisce. Otto strisce verticali da 240 px, alternate rosa e pagina chiara, salgono dal basso (power2.inOut, 0,18 s, 0,7 fotogrammi di distanza, prima la sinistra). Restano ferme, poi continuano a salire e escono, rivelando dal basso la scena successiva. 4. 3,70–5,60 s, forme su quasi nero. Una griglia da 120 px di piccoli quadrati arrotondati attenuati (un quinto sono contorni) con minuscole crocette in mezzo. Un'onda parte dal centro a ogni beat (3,73, 4,2, 4,67 e 5,13 s) a 2000 px/s. Dove passa il suo fronte, ogni cella cresce da 42 a 74 px, si arrotonda verso un cerchio, ruota di 38 gradi e diventa rosa. La prima onda rivela la griglia, e la griglia ruota lentamente in senso antiorario, sempre più veloce. Dopo l'ultima onda le celle si svuotano e svaniscono entro 5,47 s. 5. 5,55–7,42 s, particelle. Un punto di flash bianco con un sottile anello d'urto compare a 5,62 s, poi 7000 minuscoli quadrati esplodono dal centro. Si raccolgono in un'enorme parola da 590 px (esempio "IDEA") colorata in larghezza dall'arancione al lavanda al viola, con uno sfarfallio di un pixel. Da 7,0 s fluiscono via verso destra con scie, prima la sinistra della parola. Dietro c'è un morbido bagliore radiale rosa. 6. 7,42–9,45 s, 3D su sfondo radiale indaco profondo. Una sfera di Fibonacci di 1700 punti (raggio 362 px) gira lentamente sopra un pavimento in prospettiva di sottili linee viola le cui file avanzano verso lo spettatore. I punti sono rosa o viola, più grandi e luminosi davanti. Da 8,12 s ogni punto viaggia verso il proprio posto su un nodo torico (2,3) (cubic in-out, ritardi casuali fino a 0,16 s), e il nodo continua a girare. 7. 9,08–9,65 s, una seconda tendina a strisce come nella scena 3, in viola, rosa e pagina chiara. 8. 9,27–11,1 s, dashboard sulla pagina chiara con deboli guide verticali. - Passi: tre file di numeri di passo pesanti da 180 px contano con expo.out ("01", "02", "03", il terzo in rosa) con didascalie mono (esempio "PICK A TEMPLATE"). Ogni riga sale nel proprio riquadro ritagliato, a 0,08 s di distanza. - Scheda: una scheda bianca (880x740, angoli da 26 px, morbida ombra indaco) si solleva di 90 px (power3.out, 0,45 s). Contiene un titolo in grassetto minuscolo, una piccola pillola "LIVE" e un anello che si riempie con power3.out con una breve etichetta all'interno. - Grafico: quattordici barre arancioni crescono dalla base a 0,031 s di distanza, l'ultima piena e rosa. Una linea viola si disegna sopra di esse con sine.inOut (0,72 s), con un punto, un alone e un'etichetta scura in testa (esempio "No keyframes"). 9. 10,96–11,45 s, tendina a barre. Otto bande orizzontali, alternate quasi nero e rosa, entrano da sinistra (power3.inOut, 0,2 s, un fotogramma di distanza, prima quella in alto) e proseguono fino a uscire a destra. 10. 11,07–13,07 s, dichiarazione su quasi nero. Quattro fasci di 28 linee sottilissime scorrono nell'inquadratura come nastri, miscelati in modo additivo: da rosa ad arancione in alto, poi da rosa a viola, viola, e da viola a rosa in basso. Una dichiarazione su due righe in serif corsiva da 290 px entra lettera per lettera. Ogni lettera sale di 36 px e torna nitida in 0,16 s, a 0,02 s di distanza sulla riga uno e 0,035 s sulla riga due. La riga uno è chiara e inizia a x 334 (esempio "Ideas in"); la riga due è rosa e finisce a x 1438 (esempio "motion."). 11. 12,73–13,07 s, glitch. Fette del testo saltano di lato, l'inquadratura si inverte due volte, piccoli blocchi viola, gialli e rosa sfarfallano e il testo si divide in rosa e turchese. La cornice broadcast e i suoi contatori scompaiono. 12. 13,07–15,0 s, scheda finale su quasi nero. - Un flash pallido si spegne (0,26 s). - Un logotipo pesante da 260 px ("[your brand]") sale lettera per lettera da dietro la sua linea di base (back.out(1.6), 0,32 s, 0,05 s di distanza). - Il mio marchio logo cade dall'alto come la palla dell'intro, si schiaccia all'atterraggio a 13,51 s e si assesta come il punto finale del logotipo. - Un sottile filetto si disegna sotto il lockup (power3.out, 0,3 s). - Una riga mono molto spaziata si decodifica sotto, da caratteri rosa confusi a lettere chiare (13,76–14,6 s). - Una call to action in serif corsiva rosa appare in dissolvenza a 14,33 s (esempio "try it free."). - Una fila attenuata di quattro brevi funzionalità appare in dissolvenza in basso. Mantieni la scheda finale fino a 15 s. </structure> <composition> - Palette: - Quasi nero #0D0B1E per gli sfondi scuri. - Indaco profondo #1C0B5D per il testo scuro e la scena 3D. - Pagina chiara #FAF9FF per gli sfondi chiari e il testo chiaro. - Lavanda #F0EDFF per i pannelli morbidi. - Attenuato #6B6385 per le didascalie e #E9E4F2 per le linee. - Accenti: rosa principale #FB2D89, secondo viola #7C6CF2, arancione caldo #FE9117, più bianco. - Giallo #FFD23F e turchese #2DD4B0 solo come macchioline di glitch. - Se do colori di brand, inseriscili in base al ruolo. - Font: Roboto Flex con peso 900 e spaziatura stretta (-0,035 em) per tutti i titoli. JetBrains Mono per la cornice, le didascalie e le righe di commento. Instrument Serif Italic per la dichiarazione su due righe e la call to action. - Una morbida vignettatura laterale, più scura solo sui bordi sinistro e destro: circa -8 % a metà bordo e -12 % negli angoli. - Una cornice in stile broadcast sopra tutto fino al glitch: - Parentesi d'angolo da 26 px. - Un titolo in alto a sinistra (esempio "[YOUR BRAND] / YOUR TAGLINE"). - Un timecode in corsa in alto a destra (00:00:SS:FF a 60 fps). - Il nome del capitolo corrente in basso a sinistra. - Un contatore di fotogrammi "NNN / 900" con una barra di avanzamento da 300 px in basso a destra. - Ogni parte è chiara con opacità 0,9 in modalità di fusione esclusione, quindi diventa scura sulle scene chiare e tinta su rosa o viola. La cornice appare in dissolvenza a 0,3 s. </composition> <techniques> - Ogni cambio di scena si appoggia sulla griglia di beat da 28 fotogrammi. Scene e tendine si sovrappongono per alcuni fotogrammi, così nessun fotogramma è mai vuoto. - Varia le transizioni: la palla che si gonfia nello sfondo successivo, tagli di colore netti tra le quattro parole, tendine a strisce verticali, una tendina a barre orizzontale, un flash con anello d'urto e un glitch con separazione RGB verso la scheda finale. - Dai alla palla e al marchio logo un movimento fisico: schiacciamento all'impatto, allungamento nella caduta, leggero motion blur alla velocità. - Usa ingressi lettera per lettera ovunque, ogni parola con la propria curva (atterraggi expo.out, salite back.out da una maschera, scatti su note da 1/32), tornando nitide man mano che le lettere arrivano. - Mantieni tutto nitido e vettoriale: particelle, punti e linee sono minuscoli e netti, e i bagliori restano morbidi e dietro il testo. </techniques> <music> Crea una base house originale a 128,57 BPM, esattamente 15 s, posata sulla griglia dei beat. - Intro: un pad arioso con pluck frizzanti. - Dal colpo a 1,867 s: il groove completo, con cassa in quattro quarti, clap, hat e basso in sidechain. - Finale: un riser e un glitch verso un grande colpo finale a 13,07 s, poi l'accordo di chiusura risuona fino a 15 s. </music> <sound> Sopra la base, aggiungi colpi composti per il montaggio: - un riser verso un boom sul fill a 1,867 s - brevi whoosh con il picco su ogni taglio di parola e ogni tendina - morbidi click sulle onde di forme - un piccolo boom e un tic di vetro sul flash di particelle - un whoosh di scia quando le particelle se ne vanno - un sub drop verso la scena 3D - un riser e tic digitali di glitch verso il boom finale a 13,07 s - una campana quando il marchio logo atterra a 13,51 s Nessuna voce fuori campo. Mix a circa -14 LUFS, true peak sotto -1 dBTP. </sound> <references> Uno showreel di lancio di un prodotto tech nello stile di eleganti reel animati di brand: un overlay HUD broadcast, tipografia cinetica, particelle generative, una nuvola di punti 3D rotante e una dashboard UI pulita. </references>

Newsletter

Ti mandiamo i migliori nuovi prompt della community con i loro video. Niente spam, e in ogni email c’è il link per disiscriverti.

Usiamo la tua email solo per questa newsletter. Informativa sulla privacy

I cookie essenziali ricordano le impostazioni del sito. Con il tuo consenso, Google Analytics ci aiuta a capire come viene usato Motion Fab. Puoi cambiare la tua scelta a piè di pagina.

Le tue scelte sulla privacy ai sensi delle leggi statali USA applicabili. Informativa sulla privacy