Il piè di pagina della città che si accende

Piè di pagina, HoverCanvas, GSAPImpegnativaPeso compresso: Demo 23 KBGSAP 28 KBGratisScarica lo zip

Il piè di pagina di una guida della sera alla città: sotto la newsletter e i link c'è uno skyline disegnato su quattro piani di profondità che seguono il puntatore. Il cielo passa dal tramonto alla notte, le finestre si accendono una dopo l'altra, un treno passa sulla sopraelevata e il fiume riflette tutto, tremando. Ogni link ha la sua insegna al neon nella città: puntando il link l'insegna si accende con lo scatto dei tubi veri, puntando l'insegna si accende il link.

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 city that lights up</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders-display@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the footer of an evening city guide: under the newsletter and the links, a skyline at dusk drawn at four
         depths that follow the pointer. The sky goes from sunset to night, the windows come on one after another,
         an elevated train crosses and the river below mirrors it all. Every link has its own neon sign somewhere in
         the city: pointing at the link lights the sign, pointing at the sign lights the link -->
    <footer class="lc" data-footer data-autoclic>
      <canvas class="lc__city" aria-hidden="true" data-city></canvas>

      <div class="lc__top" data-top>
        <form class="lc__form" action="#" novalidate aria-labelledby="lc-news" data-form>
          <h2 class="lc__title" id="lc-news" data-rise>The Friday night list</h2>
          <p class="lc__lede" data-rise>Five places worth staying out for, in your inbox at six.</p>
          <label class="sr" for="lc-email">Email address</label>
          <div class="lc__field" data-field data-rise>
            <input class="lc__input" id="lc-email" name="email" type="email" inputmode="email" autocomplete="email" autocapitalize="off" spellcheck="false" enterkeyhint="send" placeholder="you@example.com" aria-describedby="lc-note" aria-invalid="false" data-input>
            <button class="lc__send" type="submit" data-send>
              <span class="lc__send-bg"></span>
              <span class="lc__send-label" data-send-label>Sign up</span>
              <svg class="lc__spin" viewBox="0 0 24 24" aria-hidden="true" data-spin><circle cx="12" cy="12" r="8"/></svg>
              <svg class="lc__done" viewBox="0 0 24 24" aria-hidden="true" data-done><path d="M6.4 12.6l3.7 3.7 7.6-8.6"/></svg>
            </button>
          </div>
          <p class="lc__note" id="lc-note" aria-live="polite" data-note data-rise><span class="lc__line">One email a week. Leave whenever you like.</span></p>
        </form>

        <nav class="lc__cols" aria-label="Footer">
          <div class="lc__col">
            <h3 class="lc__head" data-rise>Eat &amp; drink</h3>
            <ul class="lc__list">
              <li data-rise><a class="lc__link" href="#" data-link data-sign="BAR" style="--glow: var(--sign-bar)">Bars</a></li>
              <li data-rise><a class="lc__link" href="#" data-link data-sign="NOODLES" style="--glow: var(--sign-noodles)">Noodles</a></li>
              <li data-rise><a class="lc__link" href="#" data-link data-sign="DINER" style="--glow: var(--sign-diner)">Diners</a></li>
            </ul>
          </div>
          <div class="lc__col">
            <h3 class="lc__head" data-rise>Go out</h3>
            <ul class="lc__list">
              <li data-rise><a class="lc__link" href="#" data-link data-sign="CINEMA" style="--glow: var(--sign-cinema)">Cinemas</a></li>
              <li data-rise><a class="lc__link" href="#" data-link data-sign="JAZZ" style="--glow: var(--sign-jazz)">Jazz clubs</a></li>
              <li data-rise><a class="lc__link" href="#" data-link data-sign="THEATRE" style="--glow: var(--sign-theatre)">Theatres</a></li>
            </ul>
          </div>
          <div class="lc__col">
            <h3 class="lc__head" data-rise>Stay</h3>
            <ul class="lc__list">
              <li data-rise><a class="lc__link" href="#" data-link data-sign="HOTEL" style="--glow: var(--sign-hotel)">Hotels</a></li>
              <li data-rise><a class="lc__link" href="#" data-link data-sign="FERRY" style="--glow: var(--sign-ferry)">Ferries</a></li>
              <li data-rise><a class="lc__link" href="#" data-link data-sign="BOOKS" style="--glow: var(--sign-books)">Bookshops</a></li>
            </ul>
          </div>
        </nav>
      </div>

      <!-- the room the city stands in: the skyline, the elevated railway and the river are drawn on the canvas behind -->
      <div class="lc__room" aria-hidden="true" data-room></div>

      <div class="lc__base" data-base>
        <p class="lc__brand">
          <svg class="lc__mark" viewBox="0 0 28 28" aria-hidden="true"><path class="m-tower" d="M8 26V9.5L14 4l6 5.5V26z"/><path class="m-lit" d="M11.2 12.4h2.2v2.8h-2.2zM14.6 17.6h2.2v2.8h-2.2z"/><path class="m-dark" d="M14.6 12.4h2.2v2.8h-2.2zM11.2 17.6h2.2v2.8h-2.2z"/><path class="m-ground" d="M3 26h22"/></svg>
          <span class="lc__name">Lamplit</span>
          <span class="lc__copy"><svg viewBox="0 0 12 12" aria-hidden="true"><circle cx="6" cy="6" r="5.1"/><path d="M7.9 4.5a2.3 2.3 0 1 0 0 3"/></svg><span class="sr">Copyright</span> 2026 Lamplit Guides</span>
        </p>
        <nav class="lc__legal" aria-label="Legal">
          <a class="lc__small" href="#" data-small>Privacy</a>
          <a class="lc__small" href="#" data-small>Terms</a>
          <a class="lc__small" href="#" data-small>Contact</a>
        </nav>
      </div>
    </footer>
  </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.

73 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 piè di pagina della città che si accende» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo nero un piè di pagina largo 1040 pixel e alto circa 410, con gli angoli tondi, di Lamplit, una guida inventata alle sere in città. In alto, nel cielo, l'iscrizione alla lista del venerdì (The Friday night list, una riga che dice cosa arriva, il campo dell'email col pulsante Sign up dentro e una riga d'aiuto) e tre colonne di link brevi: Eat & drink (Bars, Noodles, Diners), Go out (Cinemas, Jazz clubs, Theatres), Stay (Hotels, Ferries, Bookshops). Sotto, una città disegnata da noi su un unico canvas: una foschia di torri lontane, una fila di palazzi in mezzo (gradoni art déco con la guglia, corone con le alette di luce, cisterne d'acqua sui tetti, antenne), i palazzi più vicini (frontoni, cornicioni, botteghe sotto i portici), una ferrovia sopraelevata a traliccio sulla banchina, col filo della linea aerea sui suoi pali, e il fiume. In fondo, sull'acqua, il marchio, il copyright e i link legali. Quando il piè di pagina entra in vista le scritte salgono una dopo l'altra e il cielo è al tramonto: il sole arancio scende dietro le torri, i bordi dei palazzi rivolti verso il sole prendono l'ultima luce calda, le nuvole lunghe sono rosa da sotto. In sei secondi il cielo passa alla notte blu, la città getta in alto una foschia calda, e le finestre si accendono una dopo l'altra in rettangoli caldi: le case con una lampada che si scalda piano (ambra, crema, gialla, qualcuna con la tenda mezza abbassata), gli uffici piano per piano con lo scatto incerto dei neon, le botteghe per prime; le torri lontane si riempiono di puntini di luce tutti insieme. A metà sera passa il treno, con i finestrini accesi, il pantografo sul filo e il fascio del faro davanti. Il fiume è la città stessa capovolta, riga per riga: ogni riga d'acqua prende una riga di città un po' più in alto e la sposta di lato con due onde, così le luci si spezzano in trattini che tremano; quando niente si muove l'acqua si calma. Il puntatore sposta i piani di profondità su molle smorzate, i più vicini di più, e il fiume si increspa al movimento. Ogni link ha la sua insegna al neon appesa a un palazzo fatto apposta per portarla: verticale sulla facciata (CINEMA, NOODLES, JAZZ), pannello sulla facciata (BAR, BOOKS, DINER, FERRY) o grandi lettere su un traliccio sul tetto (HOTEL, THEATRE). Spente si vedono i tubi scuri; puntando il link, o arrivandoci col tasto Tab, l'insegna si accende con lo scatto del gas (acceso, quasi spento, acceso, un calo, acceso per bene), con un alone largo, il nucleo quasi bianco del tubo, la luce colorata sul muro intorno e il suo riflesso nel fiume; il link prende il colore dell'insegna, si allarga sull'asse wdth del carattere e brilla appena. Puntando l'insegna nella città si accende anche il link. Un clic su un palazzo ne accende i piani dal basso, o li spegne dall'alto; un clic sulla sopraelevata chiama un treno. L'iscrizione ha i suoi stati: un indirizzo sbagliato fa tremare il campo e la riga sotto dice cosa non va; uno giusto fa uscire la parola dal pulsante, che si stringe in un cerchio con l'arco che gira e poi una spunta, la riga sotto ringrazia e la città intera si accende in un'onda da sinistra a destra, ogni finestra e ogni insegna, mentre passa un treno; dopo qualche secondo torna com'era, con l'onda all'indietro.

Come funziona

Una città da un seme

La città nasce da un generatore di numeri casuali con il seme (SEED): tre file di palazzi, lontana, di mezzo e vicina, ognuna con larghezze, altezze e tetti suoi (gradoni, guglia, cupola, frontone, cisterna, antenna). La fila vicina si costruisce intorno alle insegne: per ogni link si misura l'insegna col suo carattere (measureText) e si fa, al suo posto lungo la città, un palazzo largo e alto quanto basta per portarla sopra la ferrovia, con altri palazzi in mezzo. L'altezza massima si legge dal piè di pagina vero, fra la fine dei testi e la banchina, e si rifà tutto a ogni cambio di misura.

Ogni piano dipinto due volte

Ogni fila si dipinge una volta su un canvas nascosto al tramonto (facciate più chiare, finestre spente che specchiano il cielo caldo, il filo di luce sui bordi rivolti al sole) e una volta di notte. A ogni fotogramma in cui qualcosa cambia le due versioni si sommano con globalAlpha secondo l'ora (dusk da 0 a 1, una tween di GSAP) e sopra si disegnano le finestre accese; il risultato si tiene in un terzo canvas e si ridisegna solo se una finestra o l'ora cambiano. Così il parallasse sposta tre immagini già pronte.

Le finestre, ognuna col suo orologio

Ogni finestra ha una soglia: si accende quando l'ora la supera (le case a caso, gli uffici piano per piano) e ricorda l'istante dello scatto. La sua luce è una funzione del tempo da quell'istante: una lampada sale in 0,24 s con una curva morbida, un neon da ufficio fa acceso, quasi spento, acceso, un calo, poi su (FLICKER). Un clic su un palazzo cambia il suo modo (tutte accese o tutte spente) con un ritardo per ogni piano, e l'iscrizione cambia il modo di tutti con un ritardo che cresce da sinistra a destra: l'onda è la stessa regola.

Il fiume, una riga alla volta

La scena sopra la banchina si disegna in un canvas più largo di qualche pixel. Il fiume si riempie riga per riga di pixel con drawImage: la riga k prende la riga della scena che sta 1,45 k più in alto (la città si schiaccia nel riflesso come in prospettiva), spostata di lato da due seni che crescono verso chi guarda e un poco in su e in giù, così le luci si spezzano in trattini. L'ampiezza è un'energia che sale col movimento del puntatore e col treno e si spegne da sola; un velo d'acqua sempre più scuro verso il basso tiene leggibili le scritte.

Le insegne al neon

Ogni insegna si disegna due volte, spenta (pannello o traliccio e tubi scuri del suo colore) e accesa: le lettere tre volte, con shadowBlur largo, con shadowBlur stretto e poi il nucleo quasi bianco senza ombra. Nella città si disegna la spenta e sopra l'accesa con globalAlpha uguale alla sua luce, più un alone radiale in modalità lighter sul muro intorno; la luce la muove una timeline di GSAP con lo scatto del gas. L'insegna si accende se la tiene accesa qualcuno: il mouse sul link, il fuoco da tastiera, il puntatore sull'insegna, un tocco, la festa dell'iscrizione.

Il parallasse e il ciclo che si ferma

Il puntatore dà un bersaglio da -1 a 1; la vista lo insegue con una molla smorzata (rigidità 70, smorzamento 12) e ogni piano si sposta di PARALLAX per la sua profondità (cielo 0,06, lontano 0,2, mezzo 0,5, vicino 0,85, ferrovia 1), con un poco in verticale. Il ciclo di requestAnimationFrame, col passo limitato a 1/30 di secondo, gira solo finché la molla, una finestra, un'insegna, il treno, l'acqua o l'onda si muovono: poi si ferma e la città resta disegnata.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`DUSK`	script.js	`6`	Quanti secondi impiega la sera a scendere quando il piè di pagina entra in vista.
`LIT`	script.js	`0.62`	La parte di finestre accese a notte fatta, da 0 a 1.
`PARALLAX`	script.js	`16`	Di quanti pixel scivolano col puntatore i palazzi più vicini (quelli lontani meno).
`TRAIN`	script.js	`5`	Quanti secondi impiega il treno sopraelevato ad attraversare la città.
`RIPPLE`	script.js	`1`	Quanto si increspa il fiume: a 0 è uno specchio fermo.
`FLICKER`	script.js	`1`	Quanto scatta un'insegna al neon quando si accende: a 0 si accende in un colpo.
`SEED`	script.js	`7`	La città: un altro numero disegna un altro skyline.
`WAIT`	script.js	`1.1`	Quanto dura l'iscrizione nella demo, in secondi.

Provali nel Playground

Quando usarla

Per il piè di pagina di una guida alla città, di un hotel in centro, di un locale o di un cinema, di un festival notturno, di un'agenzia di eventi, di un blog di viaggi e di vita in città: ovunque la fine della pagina possa diventare la sera, e i link possano essere posti veri da accendere.

Sul telefono

Il piè di pagina prende la larghezza dello schermo: la newsletter va sopra, le tre colonne restano tre, con righe alte 44 pixel da toccare, e la città sta sotto, più alta, col fiume e le scritte piccole su due righe. Le insegne diventano quasi tutte verticali, più piccole, e ognuna ha ancora il suo palazzo. Un tocco su un link accende la sua insegna per un secondo e mezzo; un tocco su un'insegna accende il link; un dito trascinato di lato sposta i piani, e lasciato torna al centro con la molla; un tocco su un palazzo ne accende i piani.

Con il movimento ridotto

Niente si sposta: niente parallasse, niente treno, il fiume è fermo e le scritte compaiono in dissolvenza. Il cielo passa dal tramonto alla notte in una dissolvenza di poco più di un secondo e le finestre si accendono in dissolvenza, senza scatti. Le insegne si accendono e si spengono con una dissolvenza, il link cambia colore senza allargarsi; l'iscrizione accende la città in dissolvenza tutta insieme.

Trappole

Le prime finestre erano quadratini di 4 pixel in una griglia regolare e da lontano sembravano puntini: ora sono rettangoli alti, di misura diversa per ogni palazzo (finestre alte, finestre larghe, strisce d'ufficio), con qualche tenda mezza abbassata.
Con il fiume che specchia la città fino in fondo, le luci riflesse passavano proprio dietro il copyright e i link legali e li rendevano difficili da leggere: ora l'acqua si scurisce misurando dove cominciano le scritte piccole, e sul telefono la banchina sta più in alto.
Spostando di lato le righe del fiume, ai bordi compariva una striscia vuota: la scena si disegna in un canvas più largo di dieci pixel per parte e lo spostamento non li supera mai.
Un'insegna su un palazzo della fila di mezzo poteva finire dietro un palazzo vicino: tutte le insegne stanno sulla fila vicina, e la città si costruisce intorno a loro, col palazzo giusto per ognuna, alto abbastanza da tenerla sopra la ferrovia.
Ridisegnare tremila finestre a ogni fotogramma del parallasse era inutile: ogni fila tiene la sua immagine composta e la rifà solo quando una finestra o l'ora cambiano.
Le insegne si misurano col loro carattere, che arriva dopo: quando il carattere è caricato (document.fonts.load) la città si ricostruisce, con le stesse finestre accese perché dipendono solo dall'ora.

Librerie

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

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

Collaudo

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