Images in motion
Colonne indipendenti
2026 - now · Founder, prodotto e systems architecture
Un bel mosaico dinamico di foto, ogni colonna inclinata va nel senso opposto alle vicine e a muoverle ci pensa il CSS. Lo monti, copi le impostazioni dallo studio, e le foto restano in quel browser.
Images in motion: colonne indipendenti, direzioni opposte
Ho sviluppato e pubblicato images-in-motion. MIT. npm. Documentazione e uno studio su iim.smartsquad.io. La 1.0.0 è uscita il 3 settembre 2026.
Ogni colonna inclinata scorre nel senso opposto alle vicine. Le velocità cambiano da una colonna all’altra e restano costanti dentro la stessa. Un offset di fase evita che le righe si allineino.
Il movimento è un translate @keyframes per corsia. La geometria si calcola una volta. Il renderer DOM inietta un foglio di stile. Il browser composita le transform. React e Vue creano un host, chiamano mountImagesInMotion, e basta. Expo e NativeScript mettono lo stesso renderer in una WebView.
La pausa rallenta, poi tiene. prefers-reduced-motion e una tab nascosta fermano subito. Al host serve una misura. Nei docs il mosaico è 20rem per 20rem.
Lo studio copia un oggetto props senza URL di immagini. Le foto scelte restano in quel browser.
Sorgente: github.com/smartsquad/images-in-motion.
Galleria
