Il marchio che affiora dal rumore

Intro, Transizioni, WebGLWebGL, Canvas, GSAPMediaPeso compresso: Demo 5,6 KBGSAP 28 KBGratisScarica lo zip

L’apertura di uno studio del suono, nello stile minimal: il nome, una riga sottile che si riempie col conto, poi il marchio che affiora da un rumore che scorre piano, grano dopo grano, col bordo che brucia in blu. Enter lo rimanda nel rumore.

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The mark that rises from the noise</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- the opening of a made-up sound studio. The name, a hairline that fills with a count, then the mark comes up
       out of a drifting noise, grain by grain, with a blue edge where it burns in; Enter sends it back into the noise -->
  <main class="soglia" data-soglia>
    <canvas class="tela" data-tela aria-hidden="true"></canvas>
    <div class="piede">
      <p class="nome" data-nome><span>Halde</span><span class="nome__sotto">sound</span></p>
      <div class="carica" data-carica>
        <span class="carica__riga"><span class="carica__pieno" data-pieno></span></span>
        <span class="carica__conto" data-conto>0</span>
      </div>
      <button class="entra" type="button" data-entra>Enter</button>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.

18 valori da cambiare

Apri il Playground

Oppure chiedila a Claude Code

Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:

Prendi «Il marchio che affiora dal rumore» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

L’apertura di Halde, uno studio del suono inventato. Sul fondo quasi nero compare il nome, HALDE SOUND, in otto decimi di secondo; sotto, una riga sottile si riempie a scatti, come file che arrivano, con il conto da 0 a 100 accanto. Finito il conto la riga sparisce e, mezzo secondo dopo, sopra il nome affiora il marchio dello studio: non si disegna, emerge da un rumore che scorre piano, a macchie, prima i punti dove il rumore è più basso e poi tutti gli altri. Dove la linea si sta accendendo ha un bordo blu, che si spegne appena è piena. Poi entra piano il pulsante Enter. Premendolo, il marchio torna nel rumore, più in fretta, il nome sfuma e tutto ricomincia; se nessuno lo preme, si preme da solo dopo qualche secondo.

Come funziona

Il marchio in una texture

Il marchio si disegna una volta sola con il canvas 2D, bianco su trasparente, in un quadrato grande al massimo 440 pixel, e diventa una texture di WebGL. Sullo schermo c’è un rettangolo solo, grande quanto la finestra: lo shader sa dove sta il quadrato del marchio e fuori di lì non disegna niente.

Il rumore contro la soglia

Per ogni pixel lo shader calcola un rumore morbido (value noise in tre ottave, NOISE_SCALE dice quanto sono fini le macchie) che scorre di NOISE_SPEED nel tempo. Poi lo confronta con il punto a cui è arrivata la rivelazione: con uno smoothstep largo SOFTNESS, il pixel è spento se il rumore è più alto, acceso se è più basso, e a metà nella fascia in mezzo. La rivelazione va da 0 a 1 un poco oltre i bordi (meno SOFTNESS, più SOFTNESS), così all’inizio non si vede niente e alla fine è tutto pieno.

Il bordo che brucia

La fascia a metà, dove il pixel non è né spento né acceso, è quella che si sta accendendo: lo shader la misura (uno meno la distanza dal mezzo) e lì mescola il colore della linea con l’accento blu, di EDGE. Così il marchio affiora con un filo blu davanti, che non resta da nessuna parte.

La regia

Una timeline GSAP fa tutto: il nome in 0,8 secondi, la riga che si riempie in cinque tappe di durata uguale con power3.inOut (il caricamento dura almeno MIN_WAIT secondi anche se è tutto pronto), la pausa di AFTER_LOAD, il marchio in REVEAL_TIME secondi e il pulsante che entra in 2,5 secondi. Enter fa la timeline inversa, più corta, con power2.in, e alla fine riparte l’apertura.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`MIN_WAIT`	script.js	`1`	Quanto dura al minimo il caricamento, in secondi.
`LOAD_TIME`	script.js	`1.6`	Quanto dura il nostro caricamento finto.
`AFTER_LOAD`	script.js	`0.5`	La pausa fra la riga piena e il marchio.
`REVEAL_TIME`	script.js	`2.4`	I secondi che il marchio ci mette ad affiorare.
`SOFTNESS`	script.js	`0.15`	Quanto è morbido il bordo della dissolvenza.
`NOISE_SCALE`	script.js	`7`	Quanto sono fini le macchie del rumore.
`NOISE_SPEED`	script.js	`0.02`	Quanto in fretta scorre il rumore.
`EDGE`	script.js	`0.6`	Quanto brilla di blu il bordo che si accende.
`AUTO_ENTER`	script.js	`4`	Dopo quanti secondi Enter si preme da solo; 0 per aspettare il clic.
`HOLD`	script.js	`1.2`	I secondi di schermo vuoto prima di ricominciare.

Provali nel Playground

Quando usarla

Per l’apertura di uno studio del suono, di un’etichetta, di un festival o di un’esperienza in 3D che deve caricare qualcosa prima di entrare e che chiede un clic (per esempio per accendere l’audio). Va bene con qualunque marchio fatto di linee sottili.

Sul telefono

Uguale, col marchio che prende quasi tutta la larghezza; Enter si tocca col dito.

Con il movimento ridotto

Niente rumore che si muove e niente bordo blu: il marchio compare in una dissolvenza morbida e uniforme, e se ne va allo stesso modo.

Trappole

La soglia va allargata oltre 0 e 1 di SOFTNESS: altrimenti a rivelazione zero si vede già la metà più bassa del rumore e a rivelazione piena restano dei buchi.
Il canvas di WebGL va creato con premultipliedAlpha e il colore moltiplicato per l’opacità: senza, i bordi della linea su fondo scuro escono chiari e sporchi.
Il marchio va disegnato nella texture con lo spessore moltiplicato per il dpr: disegnato a un pixel e ingrandito, sugli schermi retina diventa una riga sfocata.
Enter va ignorato finché il marchio non è pieno: premuto a metà, la timeline di uscita parte da dove era e il marchio tornerebbe indietro a scatti.

Librerie

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 5,6 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 16 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Da fare

Licenza d’uso

Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.