La testa che si apre

WebGL, 3D, TransizioniWebGL, GSAPImpegnativaPeso compresso: Demo 9,3 KBGSAP + ScrollTrigger + CustomEase 49 KBThree.js 174 KBGratisScarica lo zip

Un adesivo di carta con una faccia si srotola sullo schermo, poi la cima della testa si strappa, si arrotola e se ne va, e da dentro spuntano un microfono, un libro, un video, un cuore e una nuvola. Gli occhi seguono il puntatore, gli oggetti fanno l’onda e si alzano quando ci passi sopra.

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 head that opens up</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
  <script type="importmap">
    { "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.178.0/build/three.module.min.js"
    } }
  </script>
</head>
<body>
  <!-- the opening of a made-up comedian's site. A paper sticker of the face unrolls onto the screen and comes closer;
       then the top of the head peels back like paper and what is inside pops out: a microphone, a book, a video, a
       heart, a cloud. Point at them and they rise and say what they are; scroll and the rest of the sticker peels off -->
  <main>
    <section class="apertura" data-apertura>
      <header class="testata">
        <span class="testata__nome">Milo Fenn</span>
        <a class="pillola" href="#date">Tickets</a>
      </header>
      <h1 class="titolo" data-titolo>Milo Fenn</h1>
      <canvas class="tela" data-tela aria-hidden="true"></canvas>
      <p class="etichetta" data-etichetta aria-hidden="true"></p>
      <button class="ancora" type="button" data-ancora hidden>Play it again</button>
    </section>

    <section class="sotto" id="date">
      <p class="sotto__frase">Comedian, podcaster and <em>terrible</em> at maps.</p>
      <p class="sotto__piccolo">Scroll back up to see the opening again.</p>
    </section>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.min.js"></script>
  <script type="module" 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.

30 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 «La testa che si apre» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

L’apertura del sito di un comico inventato, Milo Fenn, su una pagina verde petrolio col nome enorme in corallo. Al centro arriva un adesivo di carta con la sua faccia, capelli rossi e bordo bianco: all’inizio è arrotolato stretto e si srotola sullo schermo come un foglio che si stende, mentre la telecamera si avvicina da lontano e la testa scende verso il fondo. Poi la cima della testa, strappata lungo una linea frastagliata sulla fronte, comincia ad arricciarsi da un lato, si arrotola mostrando il retro bianco della carta e se ne va. Da dentro spuntano uno dopo l’altro, con un piccolo rimbalzo, una nuvola, un microfono, un libro, un vecchio schermo con il tasto play e un cuore, tutti in 3D. Gli occhi si guardano intorno e poi seguono il puntatore; il microfono, il libro e lo schermo ogni tanto fanno l’onda come allo stadio. Passando sopra un oggetto, si alza e sopra compare il suo nome. Scorrendo verso il basso si stacca anche il resto dell’adesivo, e la faccia, appena comincia, fa un’espressione stupita.

Come funziona

La faccia è un disegno su un canvas

La faccia si disegna una volta sola su un canvas 2D, in due versioni, tranquilla e stupita: prima la sagoma tracciata con una linea bianca molto spessa, che diventa il bordo dell’adesivo, poi orecchie, viso, capelli fatti di tanti cerchi, guance, sopracciglia, naso e bocca. Le pupille non ci sono: le disegna lo shader, così si possono muovere. Il canvas diventa la texture di due piani di Three.js uguali, molto suddivisi, uno sopra l’altro.

Lo strappo divide la testa in due

I due piani hanno lo stesso disegno: lo shader del pezzo di sopra butta via tutto quello che sta sotto una linea frastagliata a TEAR dell’altezza, quello di sotto tutto quello che sta sopra. La linea è un rumore in due grandezze sulla coordinata orizzontale. Lungo lo strappo tutti e due mostrano una fascia di fibra bianca di spessore variabile, e il retro della carta è bianco sporco: si vede solo quando il foglio si piega.

Piegare un foglio con una linea

Nel vertex shader ogni punto che sta oltre una linea, data da un punto e da una direzione, si avvolge intorno a un cilindro di raggio 1/CURL verso la telecamera; oltre mezzo giro prosegue piatto, ripiegato all’indietro. Basta far scorrere la linea per piegare il foglio: da -6 a 6 in UNROLL secondi l’adesivo intero si srotola, e da PEEL_AT, con la linea girata nell’altro verso, la cima si arrotola in PEEL secondi e finisce fuori dallo schermo. La parte piegata si scurisce col seno dell’angolo, così sembra una curva.

Le cose dentro la testa

Gli oggetti sono forme semplici di Three.js con materiali standard, dietro i piani: si vedono solo dove la carta non c’è più. Ognuno sta in tre gruppi uno dentro l’altro, uno per movimento, così la comparsa, l’onda e il passaggio del puntatore non si pestano: compaiono salendo da sotto in POP secondi con back.inOut(2), uno ogni POP_STAGGER. L’onda è una timeline che si ripete con WAVE: altezza, durata, ritardo fra uno e l’altro e pausa, su una curva che prima scende un poco e poi sale.

Il puntatore, gli occhi e lo scorrimento

Un raycaster cerca l’oggetto sotto il puntatore: quello si alza di LIFT, l’onda si ferma e riparte due secondi dopo che te ne vai, e un’etichetta HTML si mette sopra di lui proiettando la sua posizione sullo schermo. Gli occhi vanno verso il puntatore e, se resta fermo un secondo, tornano a guardare davanti. Scorrendo, una ScrollTrigger fa scorrere la linea di piega del pezzo di sotto attraverso tutta la faccia, e al 7,5% dello scorrimento la texture passa a quella stupita.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`UNROLL`	script.js	`2`	I secondi in cui l’adesivo si srotola (nel sito 2).
`ZOOM`	script.js	`2`	I secondi in cui la telecamera si avvicina, con expo.inOut (nel sito 2).
`PEEL`	script.js	`2`	I secondi in cui la cima della testa si arrotola via (nel sito 2).
`PEEL_AT`	script.js	`3`	Quando comincia lo strappo, in secondi (nel sito 3).
`CURL`	script.js	`3`	Quanto si arriccia la carta: più alto, rotolo più stretto.
`POP`	script.js	`1.25`	Quanto ci mette ogni oggetto a spuntare (nel sito 1,25).
`POP_STAGGER`	script.js	`0.1`	Il ritardo fra un oggetto e il successivo (nel sito 0,1).
`WAVE`	script.js	`[0.25, 0.7, 0.15, 0.5]`	L’onda: quanto sale, quanto dura, il ritardo fra uno e l’altro e la pausa (quelli del sito).
`LIFT`	script.js	`0.3`	Quanto si alza un oggetto sotto il puntatore (nel sito 0,3).
`TEAR`	script.js	`0.62`	Dove passa lo strappo, dal mento (0) alla cima (1).
`NAMES`	script.js	`['Weird thoughts', 'Live shows', 'Books', 'Videos', 'Podcast']`	I nomi delle cose, nell’ordine: nuvola, microfono, libro, schermo, cuore.

Provali nel Playground

Quando usarla

Per l’apertura del sito di una persona o di un marchio con una faccia riconoscibile: un comico, un autore, un podcast, un artista. Funziona quando gli oggetti che escono dalla testa sono davvero le sezioni del sito, e passandoci sopra si capisce dove portano.

Sul telefono

Uguale: la telecamera si allarga perché la testa stia tutta nello schermo stretto, e toccando un oggetto si alza e mostra il suo nome.

Con il movimento ridotto

Niente srotolamento, niente strappo e niente onda: la testa è già aperta con gli oggetti al loro posto, gli occhi guardano davanti, e passando sopra un oggetto compare il suo nome senza che si alzi.

Trappole

La piega lavora sui vertici: un piano con pochi quadrati si piega a spigoli. Qui sono 96 per 106, e la curva resta liscia anche da vicino.
Con un ShaderMaterial le texture in sRGB arrivano già convertite, ma il risultato va riportato in sRGB a mano: senza l’include colorspace_fragment alla fine dello shader i colori del disegno escono slavati.
Il retro del foglio si vede solo con side: DoubleSide, e si riconosce nello shader con gl_FrontFacing: lì si disegna la carta invece della faccia.
Un fromTo dentro una timeline si applica subito: gli oggetti, che partono da sotto, comparirebbero sopra la testa ancora arrotolata. Si tengono invisibili fino al momento dello strappo.
I moduli JavaScript non si caricano aprendo il file dal disco: per provarla serve un piccolo server locale.

Librerie

Three.js 0.178.0, GSAP 3.15.0, ScrollTrigger (GSAP) 3.15.0, CustomEase (GSAP) 3.15.0, Inter Tight (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 9,3 KB; le librerie: GSAP + ScrollTrigger + CustomEase 49 KB, Three.js 174 KB.

Collaudo

Provata il 8 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.