01Attivo
Campo generativo
Un campo di particelle che reagisce al puntatore. Densità ed energia si regolano dal vivo, il click inietta un impulso, il campo può attrarre o respingere.
Canvas 2D · Particelle · Pointer events · devicePixelRatio
// Play
Esperimenti interattivi Drimz AI.
Play raccoglie esperimenti front end: animazioni, interazioni, canvas e micro-sistemi visivi. Ogni voce si può provare in pagina o aprire a schermo intero.
- 4 voci nel registro
- Un loop rAF condiviso
- Reduced motion rispettato
Anteprima vivaCampo generativo
Scegli un esperimento.
Ogni scheda porta al suo blocco, più in basso. Attivo vuol dire che gira già in pagina.
- 02Attivo
Magnetismo tipografico
Una parola che si lascia tirare. Le lettere seguono il puntatore, e quando lo togli tornano al loro posto oltrepassandolo di poco.
Spring physics · Tipografia · Inerzia · transform
- 03Attivo
Scroll cinematico
Lo scroll guida una scena in tre atti: set, azione e taglio. Scorrendo avanti la scena avanza, tornando indietro si riavvolge.
Scroll driven · CSS variables · position sticky · calc()
- 04Attivo
Catena del puntatore
Dodici nodi in fila: il primo segue il puntatore, ogni altro segue quello davanti. Muovi piano e resta una linea, muovi di scatto e si apre a frusta.
Lerp · Pointer events · transform · DOM
Campo generativo.
Un campo di particelle che reagisce al puntatore. Densità ed energia si regolano dal vivo, il click inietta un impulso, il campo può attrarre o respingere.
Ogni punto integra velocità e attrito dentro un campo di flusso, e il puntatore aggiunge una forza radiale. Il movimento lascia una scia leggera, così il campo resta leggibile mentre reagisce al puntatore.
Canvas 2D · Particelle · Pointer events · devicePixelRatio
Magnetismo tipografico.
Una parola che si lascia tirare. Le lettere seguono il puntatore, e quando lo togli tornano al loro posto oltrepassandolo di poco.
Ogni lettera è una molla smorzata: la distanza dal puntatore genera un vettore di attrazione e un integratore con inerzia insegue il bersaglio, e al rilascio nasce l'overshoot elastico. Per frame si scrivono solo transform.
Spring physics · Tipografia · Inerzia · transform
MAGNETISMO
Scroll cinematico.
Lo scroll guida una scena in tre atti: set, azione e taglio. Scorrendo avanti la scena avanza, tornando indietro si riavvolge.
Il JavaScript scrive una sola variabile, --p da 0 a 1, e il CSS ricava da lì i progressi dei tre atti con calc e clamp. Mentre la scena si monta, la barra e l'atto in corso dicono sempre a che punto sei.
Scroll driven · CSS variables · position sticky · calc()
- Atto 01
Set
Il mirino si disegna e la camera trova l'inquadratura. Occupa il primo terzo della timeline.
- Atto 02
Azione
Il tracking del titolo si apre in proporzione allo scroll e una wipe attraversa lo stage.
- Atto 03
Taglio
Il claim entra, il beam lime chiude la scena e la pagina riprende a scorrere. Tornando indietro, la scena si riavvolge.
Una catena che segue il puntatore.
Dodici nodi in fila: il primo segue il puntatore, ogni altro segue quello davanti. Muovi piano e resta una linea, muovi di scatto e si apre a frusta.
Interpolazione lineare e basta: un fattore costante per nodo e una scrittura di transform per frame. È l'esempio minimo della raccolta, dodici elementi nel DOM.
Lerp · Pointer events · transform · DOM
Dodici punti collegati in fila seguono il puntatore con un ritardo crescente e tornano al centro quando il puntatore esce.
Regola di casa
Un esperimento è finito quando si può togliere e tutto il resto regge.
Registro: components/play/registry.ts// Accessibilità
Reduced motion, sul serio.
Con prefers-reduced-motion attivo questa pagina resta ferma e a piena opacità: ogni esperimento mostra un frame statico e il movimento parte solo se lo chiedi tu, con un comando esplicito. Vale anche per l'anteprima in cima e per la scena a tre atti, che si può riprodurre una volta invece di seguire lo scroll.
- Frame statico al posto del loop, in tutti i blocchi
- Comando di avvio per chi vuole vedere il movimento
- Corsa di scroll ridotta a un blocco fermo
Come funziona il registro.
Ogni esperimento è un componente separato e una voce nel registro. La pagina lo carica, lo numera e lo impagina senza modificare gli altri.
Un solo loop di frame
Gli esperimenti condividono lo scheduler del sito: un unico loop distribuisce i frame a chi ne ha bisogno, compresa l'anteprima in cima alla pagina.
Start e stop automatici
Ogni esperimento osserva se stesso: parte quando entra nel viewport, si ferma quando esce e quando la tab va in background.
Isolati per costruzione
Un esperimento è un file e un chunk a parte. Se ne rimuovi uno dal registro sparisce dalla pagina e dal bundle, e gli altri restano dove sono.
- 4
- voci attivenel registro di questa pagina
- 1
- loop rAFcondiviso con il resto del sito
- 0
- librerie di animazionesolo codice del progetto
Vuoi portare questo tipo di interazione in un progetto?
Raccontaci cosa vuoi costruire: sito, prodotto, campagna o interfaccia. Ti rispondiamo con un primo modo concreto per partire.