Vai al contenuto
animorio
EN
Torna alla libreria

Il tubo catodico

Una scrivania da computer di una volta dietro un vetro da televisore: righe, banda di luce, sfarfallio, testi che si scrivono a scatti e un interruttore che spegne il tubo in una riga e lo riaccende con un altro fosforo.

WebGL, Testo, TransizioniWebGL, Solo CSS, GSAPImpegnativaGratis

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN.

Scarica lo zip
<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Il tubo catodico</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/vt323@5.2.7/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="tubo" data-tubo data-tema="verde">
    <!-- tutto quello che sta sul vetro: si spegne e si riaccende come una televisione vecchia -->
    <div class="schermo" data-schermo>
      <header class="barra">
        <span class="barra__marchio">Bottega</span>
        <span class="barra__voci" aria-hidden="true"><span>Archivio</span><span>Vista</span><span>Aiuto</span></span>
        <span class="barra__ora" data-ora></span>
      </header>

      <section class="scrivania">
        <h1 class="titolo" data-titolo>Bottega di luce</h1>
        <p class="testo" data-righe>Tre file e un tubo che ronza. Apri un’icona, oppure spegni e riaccendi: il tubo cambia colore.</p>
        <div class="icone">
          <button class="icona" type="button" data-apri="lettera" data-autoclic>
            <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 1h7l3 3v11H3z" /><path class="icona__segni" d="M5 6h6M5 8h6M5 10h6M5 12h4" /></svg>
            <span>lettera.txt</span>
          </button>
          <button class="icona" type="button" data-apri="ricetta">
            <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2 3h12v10H2z" /><path class="icona__segni" d="M4 6h3M4 8h8M4 10h8" /></svg>
            <span>ricetta.txt</span>
          </button>
          <button class="icona" type="button" data-apri="diario">
            <svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 1h10v14H3z" /><path class="icona__segni" d="M5 1v14M7 5h4M7 7h4" /></svg>
            <span>diario.log</span>
          </button>
        </div>
      </section>

      <section class="finestra" data-finestra hidden role="dialog" aria-labelledby="finestra-titolo">
        <header class="finestra__barra">
          <span id="finestra-titolo" data-finestra-titolo></span>
          <button class="finestra__chiudi" type="button" data-chiudi aria-label="Chiudi la finestra">
            <svg viewBox="0 0 12 12" aria-hidden="true"><path d="M2 2l8 8M10 2l-8 8" /></svg>
          </button>
        </header>
        <div class="finestra__corpo" data-finestra-corpo></div>
      </section>

      <footer class="comandi">
        <button class="interruttore" type="button" data-spegni>Spegni e riaccendi</button>
        <div class="temi" role="group" aria-label="Colore del fosforo">
          <button class="tema" type="button" data-scegli="verde" aria-pressed="true" aria-label="Verde"></button>
          <button class="tema" type="button" data-scegli="ghiaccio" aria-pressed="false" aria-label="Ghiaccio"></button>
          <button class="tema" type="button" data-scegli="rosa" aria-pressed="false" aria-label="Rosa"></button>
        </div>
      </footer>
      <div class="lampo" data-lampo aria-hidden="true"></div>
    </div>

    <!-- il vetro: righe, griglia, banda che scende, vignetta e cornice, disegnati da uno shader -->
    <canvas class="velo" data-velo aria-hidden="true"></canvas>
    <!-- i tre rettangoli che annunciano una finestra, come sui computer di una volta -->
    <div class="zoom" data-zoom aria-hidden="true"><i></i><i></i><i></i></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>

Cosa fa

Dentro una cornice dagli angoli tondi c’è una scrivania verde fosforo: la barra in alto con l’ora, un titolo, due righe e tre icone. Il vetro ha le sue righe, una griglia sottile, una banda di luce che scende piano e un leggero sfarfallio. Il titolo si scrive una lettera alla volta con la testa più accesa, le righe si scoprono dietro un cursore a blocco. Aprendo un’icona tre rettangoli volano dall’icona alla finestra, e la finestra compare attraverso un retino. Il tasto in basso spegne il tubo: l’immagine si schiaccia in una riga, poi in un punto; dopo un attimo di buio una riga di luce si allarga e il tubo torna, con un altro colore.

Come funziona

Il vetro

Un canvas WebGL sopra tutto, che non riceve i clic, disegna il vetro trenta volte al secondo. Dentro lo schermo l’alfa scurisce (righe ogni tre pixel con sin(y × 2π/3), griglia ogni quattro, vignetta) e il colore aggiunge luce (la banda che scende ogni nove secondi, la grana, un riflesso in alto a sinistra); fuori dal rettangolo dagli angoli tondi c’è la cornice, opaca.

Trenta scatti al secondo

I testi non scorrono: saltano. Un orologio unico (requestAnimationFrame con un accumulatore) fa uno scatto ogni 33 millesimi e fa girare i compiti del momento. Il titolo scopre ⌈f/d × n⌉ lettere per scatto e tiene accese per due scatti le ultime arrivate; le righe si scoprono con due strati di mask-image, le righe finite e la riga in corso fino al cursore.

I rettangoli e il retino

Aprendo un file, tre rettangoli vuoti vanno dal centro dell’icona alla misura della finestra in cinque scatti ciascuno (easeOutQuad), uno scatto dietro l’altro. Poi la finestra compare attraverso quattro maschere di Bayer, al 20, 40, 60 e 80%, due scatti ciascuna.

Spegnere e riaccendere

Una timeline GSAP schiaccia lo schermo a un’altezza dello 0,6% e poi lo stringe a zero di larghezza, sempre più luminoso, in 0,44 secondi. Al buio cambia il fosforo (le variabili CSS e i colori dello shader); poi la riga si allarga, il vetro si apre al 103% e torna al 100% in 0,78 secondi, mentre una lama di luce svanisce.

Valori da cambiare

NomeFileDi partenzaCosa cambia
SCATTIscript.js30Quante volte al secondo si muovono i testi: più basso, più scatti si vedono.
SPEGNEscript.js0.44Secondi dello spegnimento.
ACCENDEscript.js0.78Secondi dell’accensione.
--carta, --inchiostrostyle.csstre temiI colori di ogni fosforo: il vetro li legge da qui, quindi basta cambiarli nel CSS.

Quando usarla

Per un portfolio o un prodotto con un’anima di computer d’altri tempi, o per una pagina di gioco. Il vetro si mette sopra qualunque contenuto senza toccarlo.

Sul telefono

Uguale, con la cornice più stretta, la barra senza i menù e il vetro disegnato a densità 1 per risparmiare.

Con il movimento ridotto

Il vetro resta con le righe e la cornice ma senza banda, grana e sfarfallio; i testi compaiono interi, niente rettangoli né retino, e il cambio di fosforo è una dissolvenza di 150 millesimi.

Trappole

  • Il vetro deve lasciare passare i clic (pointer-events: none) e usare l’alfa premoltiplicata: l’alfa scurisce, il colore aggiunge luce, e il colore non deve superare l’alfa.
  • Non ridisegnare il vetro a ogni fotogramma: trenta volte al secondo bastano, e da fermo o fuori dallo schermo non serve.
  • Per gli scatti usa un solo orologio legato a requestAnimationFrame, non tanti setInterval: così i tempi restano insieme e si possono rallentare tutti insieme.
  • Misura la finestra prima di mostrarla (visibility: hidden), o i rettangoli non sanno dove andare.

Librerie

GSAP 3.15.0, VT323 (font) 5.2.7.

Peso: 29 KB dei nostri file.

Collaudo

Provata il 27 settembre 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