Vai al contenuto
animorio
EN
Torna alla libreria

Il numero che era lo schermo

Transizioni, TestoGSAP, CanvasImpegnativaPeso compresso: Demo 12 KBGSAP + SplitText 31 KBGratisScarica lo zip

Un caricamento in un solo gesto: lo schermo bianco è l’interno di un numero gigante. Il conto sale fino al numero della macchina, cinque luci si accendono, poi il numero si stringe al suo posto nella pagina, inseguito da una copia arancione, e la pagina compare intorno.

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" class="is-loading">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The number that was the screen</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders-display@5.3.0/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/barlow@5.3.0/400.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/barlow@5.3.0/600.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="bar">
    <a class="brand" href="#">Halcyon Motorsport</a>
    <nav class="bar__nav" aria-label="Sections">
      <a href="#">Team</a>
      <a href="#">Season</a>
      <a href="#">Partners</a>
    </nav>
    <button class="replay" type="button" data-replay data-autoclic>Replay the start</button>
  </header>

  <main class="hero" data-hero>
    <!-- thin lines down the page: they grow from the top when the hero opens -->
    <div class="lines" aria-hidden="true"><i data-line></i><i data-line></i><i data-line></i><i data-line></i></div>

    <!-- the drawing: grey while the loader covers it, it zooms back and takes its colours -->
    <div class="art" data-art aria-hidden="true">
      <svg viewBox="0 0 640 560" role="presentation">
        <defs>
          <linearGradient id="shell" x1="0" y1="0" x2="0.35" y2="1">
            <stop offset="0" stop-color="#ffffff"/>
            <stop offset="0.55" stop-color="#eef0f4"/>
            <stop offset="1" stop-color="#c3c9d4"/>
          </linearGradient>
          <linearGradient id="visor" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stop-color="#ffc35a"/>
            <stop offset="0.4" stop-color="#ff5a36"/>
            <stop offset="0.75" stop-color="#9a2f8a"/>
            <stop offset="1" stop-color="#2a1a5e"/>
          </linearGradient>
          <linearGradient id="dusk" x1="0" y1="0" x2="1" y2="0.4">
            <stop offset="0.35" stop-color="#000" stop-opacity="0"/>
            <stop offset="1" stop-color="#000" stop-opacity="0.32"/>
          </linearGradient>
          <radialGradient id="shine" cx="0.32" cy="0.2" r="0.42">
            <stop offset="0" stop-color="#fff" stop-opacity="0.85"/>
            <stop offset="1" stop-color="#fff" stop-opacity="0"/>
          </radialGradient>
          <radialGradient id="floor" cx="0.5" cy="0.5" r="0.5">
            <stop offset="0" stop-color="#000" stop-opacity="0.55"/>
            <stop offset="1" stop-color="#000" stop-opacity="0"/>
          </radialGradient>
          <clipPath id="shell-cut"><path d="M150 470C120 440 110 400 112 360L118 300C122 190 210 92 330 80C470 68 588 160 594 282C598 360 570 420 520 452C470 482 380 488 300 486L190 484C172 484 158 480 150 470Z"/></clipPath>
        </defs>
        <ellipse cx="350" cy="512" rx="250" ry="26" fill="url(#floor)"/>
        <!-- the spoiler at the back -->
        <path d="M512 146L606 166C614 168 616 176 612 184L604 200L530 190Z" fill="#232836"/>
        <!-- the shell, its stripes and its shading -->
        <path d="M150 470C120 440 110 400 112 360L118 300C122 190 210 92 330 80C470 68 588 160 594 282C598 360 570 420 520 452C470 482 380 488 300 486L190 484C172 484 158 480 150 470Z" fill="url(#shell)"/>
        <g clip-path="url(#shell-cut)">
          <path d="M96 206C220 112 430 98 640 196V244C430 150 236 160 96 254Z" fill="#ff4b1f"/>
          <path d="M96 268C230 184 430 176 640 268V292C430 206 236 214 96 296Z" fill="#14336b"/>
          <path d="M352 330C430 318 540 316 640 334V560H352Z" fill="#14336b"/>
          <path d="M352 330C430 318 540 316 640 334V346C540 328 430 330 352 342Z" fill="#ff4b1f"/>
          <path d="M470 392l14 30 33 4-24 22 6 33-29-16-29 16 6-33-24-22 33-4z" fill="#ffffff"/>
          <text x="420" y="232" transform="rotate(9 470 230)" font-family="'Big Shoulders Display Variable', Impact, sans-serif" font-weight="800" font-size="22" letter-spacing="5" fill="#ffffff">HALCYON</text>
          <path d="M0 0H640V560H0Z" fill="url(#dusk)"/>
          <ellipse cx="270" cy="150" rx="210" ry="120" fill="url(#shine)"/>
        </g>
        <!-- the eye port and the visor, with a hard glint -->
        <path d="M128 262C150 218 214 196 300 196C368 196 404 222 410 256C414 282 396 300 362 302L160 304C136 304 122 286 128 262Z" fill="#0b0d12"/>
        <path d="M140 262C160 228 218 210 298 210C356 210 388 230 394 258C398 278 384 290 356 291L168 292C146 292 134 280 140 262Z" fill="url(#visor)"/>
        <path d="M158 250C186 228 236 218 290 218" fill="none" stroke="#fff" stroke-opacity="0.7" stroke-width="7" stroke-linecap="round"/>
        <path d="M318 222C340 224 358 230 370 240" fill="none" stroke="#fff" stroke-opacity="0.35" stroke-width="5" stroke-linecap="round"/>
        <circle cx="424" cy="270" r="15" fill="#232836"/>
        <circle cx="424" cy="270" r="6" fill="#8b93a6"/>
        <!-- the chin: vents and the rubber trim along the bottom -->
        <g fill="#9aa2b3"><rect x="176" y="356" width="104" height="9" rx="4.5"/><rect x="172" y="378" width="108" height="9" rx="4.5"/><rect x="176" y="400" width="104" height="9" rx="4.5"/></g>
        <path d="M162 474C262 490 420 492 522 452" fill="none" stroke="#1b1f29" stroke-width="16" stroke-linecap="round"/>
      </svg>
    </div>

    <!-- the numbers on the left -->
    <div class="hero__stats" data-group>
      <p class="stat"><b data-roll>27</b><span data-text>Car number</span></p>
      <p class="stat"><b data-roll>9</b><span data-text>Podiums</span></p>
      <p class="stat"><b data-roll>12</b><span data-text>Circuits raced</span></p>
    </div>

    <div class="hero__facts" data-group>
      <p data-text><span>Home circuit</span>Lakeside Ring</p>
      <p data-text><span>Racing since</span>2019</p>
      <p data-text><span>Series</span>GT4 Coastal Cup</p>
    </div>

    <div class="hero__name" data-group>
      <h1 data-text>Halcyon</h1>
      <p data-text>Two drivers, one car, a garage on the coast. We race for the hundredth of a second nobody else bothers to find.</p>
    </div>

    <div class="hero__next" data-group>
      <p data-text>Next race · Pine Hollow</p>
      <p class="countdown" data-countdown aria-label="Time to the next race">06:14:22:09</p>
    </div>
  </main>

  <!-- the loader: the white of the screen is the inside of a giant number; it shrinks into the number of the hero -->
  <div class="loader" data-loader aria-hidden="true">
    <svg class="giant giant--accent" data-giant="accent" preserveAspectRatio="none"><g data-glyph></g></svg>
    <svg class="giant giant--white" data-giant="white" preserveAspectRatio="none"><g data-glyph></g></svg>
    <div class="count" data-count>27</div>
    <div class="lights"><i data-light></i><i data-light></i><i data-light></i><i data-light></i><i data-light></i></div>
  </div>

  <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/SplitText.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.

41 valori da cambiare

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 numero che era lo schermo» da Animorio e adattala al mio sito

Cosa fa

La home di una squadra corse inventata, Halcyon Motorsport, macchina numero 27. Si apre su uno schermo bianco: al centro il conto sale da 00 a 27 come un contachilometri e in basso cinque luci si accendono arancioni una dopo l’altra. Poi il bianco si stringe: era l’interno di un 27 gigante, che rimpicciolisce fino a posarsi al centro della pagina, con una copia arancione che lo insegue di un soffio. Intorno compare la pagina scura: il casco disegnato dietro torna dalla sua zoomata e prende i colori, le righe del fondo scendono dall’alto, e a gruppi arrivano i numeri della squadra, che girano come rulli, e le parole, che salgono da sotto la riga. In basso a destra il conto alla rovescia per la prossima gara gira all’indietro ogni secondo. Il pulsante in alto fa ripartire tutto.

Come funziona

Il numero gigante

Il numero è un SVG grande quanto lo schermo, con dentro i contorni delle cifre del carattere, Big Shoulders Display 900, messi nello script come tracciati. A ogni fotogramma lo script calcola il viewBox da un valore e che va da 0 a 1: la scala passa da SCALE a 1 e il punto più spesso del numero, che all’inizio sta al centro dello schermo, scivola in linea retta fino al suo posto. Così il numero resta nitido a qualsiasi ingrandimento, cosa che una scala CSS cento volte più grande non garantisce.

Il punto più spesso

Per partire con lo schermo tutto bianco serve un punto del numero abbastanza lontano dai bordi. Lo script disegna le cifre su un canvas e, in due passate, dà a ogni pixel inchiostrato la sua distanza dal bordo: il più lontano vince. Se mezza diagonale dello schermo, vista alla scala di partenza, non ci sta dentro, la scala di partenza sale.

Il contachilometri

Ogni cifra è una colonna 0-9 0-9 dentro una maschera alta una riga, spostata in em. La larghezza della maschera segue quella della cifra che mostra, misurata con measureText, perché le cifre del carattere non sono tutte larghe uguali. Gira prima la cifra più a destra, poi le altre a 0,04 secondi l’una dall’altra; il conto alla rovescia gira all’indietro.

I tempi

È tutto una timeline: il conto sale in COUNT secondi con expo.out; le luci si accendono in LIGHT secondi l’una, distribuite perché l’ultima sia accesa 0,3 secondi prima che il conto si fermi. Dopo HOLD secondi il numero si stringe in TAKEOVER secondi con expo.inOut, la copia arancione CHASE secondi dopo; il conto sparisce rimpicciolendo in un secondo; le luci si spengono in fila, 0,2 secondi l’una a 0,08 di distanza, compresse in metà del tempo del passaggio. Il casco torna da ART a 1 e dal grigio ai colori in 1,6 secondi, e le righe del fondo scendono in 1,6 secondi in ordine sparso.

La pagina

0,4 secondi prima che il numero si posi arrivano i gruppi della pagina, 0,15 secondi l’uno dopo l’altro: i numeri girano in STATS secondi con expo.out, 0,08 secondi l’uno dall’altro, e le parole, divise in righe con SplitText e una maschera, salgono dal 110% in TEXT secondi. Poi il conto alla rovescia scatta ogni secondo, con le cifre che girano all’indietro in TICK secondi. Mentre la partenza è in corso il pulsante non la interrompe.

Valori da cambiare

NomeFileDi partenzaCosa cambia
NUMBERscript.js'27'Il numero della macchina: il conto sale fino a lì e il numero gigante è fatto delle sue cifre.
SCALEscript.js100Quante volte più grande parte il numero gigante (sale da sola se lo schermo non starebbe dentro un tratto).
COUNTscript.js2I secondi in cui il conto sale fino al numero.
LIGHTscript.js0.35I secondi in cui si accende ogni luce; l’ultima è accesa 0,3 secondi prima che il conto si fermi.
HOLDscript.js0.05La pausa fra il conto e il passaggio, in secondi.
TAKEOVERscript.js1.2I secondi in cui il numero gigante si stringe al suo posto.
CHASEscript.js0.025Quanto resta indietro la copia arancione rispetto a quella bianca, in secondi.
LANDscript.js0.16La larghezza del numero posato, come parte della larghezza dello schermo (fra 130 e 260 pixel).
ARTscript.js1.2L’ingrandimento da cui parte il disegno dietro.
STATSscript.js1.2I secondi in cui gira ogni numero della pagina.
TEXTscript.js0.8I secondi in cui salgono le parole.
TICKscript.js0.45I secondi in cui una cifra del conto alla rovescia gira all’indietro.

Provali nel Playground

Quando usarla

Per l’apertura di un sito che ha un numero da mostrare: una squadra, un pilota, un anniversario, un evento con la sua data. È un caricamento: va bene una volta, all’arrivo, non a ogni pagina.

Sul telefono

Il numero si posa più in alto, al 36% dello schermo, il casco si allarga sotto, i numeri della squadra vanno in riga sotto la barra e i fatti di destra spariscono. Il punto più spesso vale anche sullo schermo stretto: se serve, la scala di partenza sale.

Con il movimento ridotto

Nessun caricamento: la pagina c’è già, col numero bianco al suo posto, il casco a colori e il conto alla rovescia che cambia senza girare.

Trappole

  • Il testo SVG ingrandito cento volte i browser lo disegnano a una misura massima, più piccolo di com’è: il bianco smette di coprire lo schermo. Le cifre vanno in tracciati; qui sono i contorni del carattere, presi una volta dal file del font e messi nello script.
  • GSAP scrive il suo transform in linea e azzera translate, rotate e scale del CSS: il conto si centra con xPercent e yPercent, e il casco si centra col suo contenitore mentre si anima l’svg che ci sta dentro.
  • Scala e spostamento animati insieme con la stessa curva fanno scivolare il punto di partenza in linea retta: per questo il viewBox si ricava da un solo valore e invece di animare due proprietà che potrebbero andare per conto loro.
  • Finché il carattere non è arrivato e il numero non è disegnato serve un foglio bianco sopra la pagina, altrimenti per un attimo si vede la pagina finita.

Librerie

GSAP 3.15.0, Big Shoulders Display (font variabile) 5.3.0, Barlow 5.3.0.

Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP + SplitText 31 KB.

Collaudo

Provata il 2 ottobre 2026

  • Computer: Fatto
  • Telefono: Fatto
  • Movimento ridotto: Fatto
  • Safari su iPhone: Fatto

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.

Della stessa famiglia

Tutte le animazioni