Contattaci
// Play

Esperimenti interattivi Drimz AI.

Cose che abbiamo provato. Animazioni, interazioni, canvas. Si toccano in pagina o si aprono a schermo intero.

  • 4 esperimenti da provare
  • Scritti a mano, senza librerie
  • Si fermano se chiedi meno movimento

Scegli un esperimentoParliamo di un progetto

Anteprima vivaCampo generativo

// Registro4 voci

Scegli un esperimento.

Ogni scheda porta al suo blocco, più in basso. Attivo vuol dire che gira già in pagina.

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

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

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

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
// Esperimento 03Attivo

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()

  1. Atto 01

    Set

    Il mirino si disegna e la camera trova l'inquadratura. Occupa il primo terzo della timeline.

  2. Atto 02

    Azione

    Il tracking del titolo si apre in proporzione allo scroll e una wipe attraversa lo stage.

  3. Atto 03

    Taglio

    Il claim entra, il beam lime chiude la scena e la pagina riprende a scorrere. Tornando indietro, la scena si riavvolge.

// Esperimento 04Attivo

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.

Play · Drimz AI
// 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
// A cosa serveDalla prova al progetto

Cosa ci porti a casa.

Questi quattro esperimenti non sono un passatempo: sono il banco di prova di quello che poi finisce nei siti e nelle interfacce che consegniamo. Quando ci chiedi un'animazione o un'interazione, la risposta parte da qui invece che da una presentazione. Il mestiere sta nello sviluppo di siti e interfacce.

01 · Cosa cambia

Si prova prima di sceglierla

Un'interazione non si giudica descritta, si giudica usandola. Qui la muovi tu, prima di metterla in un preventivo: se ti convince in pagina, sai già come sarà sul tuo sito.

02 · Cosa cambia

Non appesantisce la pagina

Non usiamo librerie di animazione: è codice scritto per il progetto, e tutto il movimento del sito gira su un motore solo, che si ferma quando esci dallo schermo. Il costo per chi ti visita resta basso.

03 · Cosa cambia

Entra e si toglie senza rifare il sito

Ogni esperimento è un pezzo a sé, che vive senza gli altri. Sul tuo progetto si monta dove serve e si smonta quando non serve più, senza toccare il resto delle pagine.

4
esperimenti provabilisubito, senza installare niente
0
librerie di animazionemeno peso da scaricare per chi ti visita
1
motore per tutto il movimentolo stesso che muove il resto del sito
// Prossimo passoIniziamo un 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.

IniziamoVedi i progetti