L’inchiostro che scopre
WebGL, Hover
NuovaA vita
Torna alla libreria
La luce radente
Un rosone di gesso bianco su un muro bianco: da fermo quasi non si vede. Dove passa il puntatore la luce arriva di taglio, ogni foglia e ogni petalo fa la sua ombra, e dopo un paio di secondi il gesso si riaddormenta.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN.
Il codice di questa animazione è nell’accesso a vita.
L’anteprima resta libera: guardala, rallentala, provala sul telefono.
Accesso a vitaCosa fa
Un muro color gesso con un rosone in bassorilievo: una cornice con una fila di perle, una ghirlanda d’alloro e un fiore di ventiquattro petali con un bottone al centro. Con la luce dritta il rilievo non fa ombra e si indovina appena. Dove passa il puntatore la luce si abbassa e arriva da sinistra in alto, radente: i pendii verso la luce diventano bianchi, gli altri si scuriscono, e ogni foglia e ogni perla getta sul fondo un’ombra che si allunga. La scia si spegne da sola in un paio di secondi, e due punti vaganti tengono il muro sveglio anche quando nessuno lo tocca. Il muro intero si piega appena verso il puntatore.
Come funziona
Il rilievo è un’immagine
Lo script disegna il rosone su un canvas 2D in toni di grigio, dove più chiaro vuol dire più in rilievo: un anello, 44 perle, 60 foglie, 24 petali a gradiente e un bottone. Poi lo sfoca con tre passate di box blur, in orizzontale e in verticale: l’altezza è max(sfocatura larga; 0,6 × sfocatura stretta), così i bordi restano morbidi ma i dettagli non si perdono. Una terza sfocatura, media, serve per scurire appena le pieghe. Altezza e pieghe vanno in una texture RG16F da 640 × 640 (448 al telefono).
La scia
Una seconda tela 2D, larga 216 pixel e con le proporzioni del muro, tiene la scia. A ogni giro si copre di nero con alfa 1 − 0,85^(dt × 60) e si ridisegnano in modalità lighter gli ultimi 200 punti: un timbro radiale con alfa (1 − età/120)² × 0,13 e un raggio che cresce e cala con sin(π × vita). Il puntatore aggiunge ⌈30 × distanza⌉ punti per giro, così anche un gesto veloce lascia una scia continua. Si disegna al massimo 44 volte al secondo, e il giro si ferma quando il muro esce dallo schermo o la scheda è nascosta.
La luce
Lo shader legge la scia con cinque campioni e ne ricava k = (smoothstep(0; 0,3; t) × smoothstep(0; 1; t))^0,7. Da k dipendono la profondità del rilievo (da 0,6 a 9) e l’altezza della luce (z da 1,4 a 0,45). La normale viene dalle differenze d’altezza fra i vicini, e la luce è (ambiente + n·L) / (ambiente + L.z): divisa per quella che riceve il piano, così il muro piatto resta sempre dello stesso bianco e cambia solo quello che ha un pendio. Le luci alte non si tagliano di colpo: salgono verso il bianco con una curva esponenziale.
Le ombre portate
Per ogni punto lo shader cammina verso la luce, dodici passi da 2,5 cinquecentododicesimi del rilievo, e misura di quanto il raggio passa sopra il rilievo, diviso la distanza. Il valore più piccolo, passato in smoothstep(−0,22; 0,22), dice quanto il punto è in ombra: la penombra si allarga con la distanza, come sotto una luce vera. Con la luce alta il raggio sale in fretta e non c’è ombra; con la luce radente le ombre si allungano.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SPEGNE | script.js | 0.85 | Quanto resta della scia a ogni sessantesimo di secondo: più alto, il gesso resta sveglio più a lungo. |
FORZA | script.js | 0.13 | Quanto accende ogni passaggio del puntatore. |
PROFONDO | script.js | [0.6, 9] | La profondità del rilievo addormentato e di quello sveglio. |
AMBIENTE | script.js | 0.9 | La luce diffusa: più alta, ombre più chiare. |
rosone() | script.js | cornice, ghirlanda, fiore | Il disegno del rilievo: qualunque cosa disegnata in grigi su un canvas diventa gesso, anche un logo o una parola. |
GESSO, --gesso | script.js, style.css | #EFECE6 | Il colore del muro: va cambiato in tutti e due i file, o il bordo della tela si vede. |
Quando usarla
Per una pagina che vuole premiare chi esplora: un marchio, un’opera, un simbolo che si scopre solo passandoci sopra. Funziona con qualunque disegno in grigi, anche un logo.
Sul telefono
Il dito dipinge la luce e un tocco accende il suo punto. La scia è più piccola (128 pixel), si disegna 36 volte al secondo a densità 1 e i punti vaganti accendono di più, perché un dito non passa di continuo. Dentro un iframe il dito in verticale resta alla pagina.
Con il movimento ridotto
Niente scia e niente punti vaganti: il rilievo resta fermo con una luce a metà, leggibile. Un tocco porta la luce da dritta a radente, e ritorno, in sei decimi di secondo.
Trappole
- Il muro piatto deve restare dello stesso colore con qualunque luce: dividi per la luce che riceverebbe il piano, o a ogni cambio di luce lampeggia tutto lo sfondo.
- Carica la texture d’altezza a 16 bit (RG16F): a 8 bit i pendii dolci diventano scalini, e con la luce radente si vedono tutti.
- Lo spegnersi della scia e l’età dei punti vanno moltiplicati per dt × 60: se il giro rallenta, la scia deve durare gli stessi secondi, non gli stessi fotogrammi.
- Fra un evento del puntatore e il successivo possono passare molti pixel: riempi il tratto di punti intermedi, o la scia diventa una fila di macchie.
Librerie
GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.
Peso: 21 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.
