Il manifesto che si sbriciola

/* Il manifesto che si sbriciola
   Un palco fermo con qualche frase sparsa. Se scorri in fretta il testo trema: una finestra di
   segni sbagliati corre lungo le frasi, tanto più fitta quanto più veloce è lo scorrimento.
   Se continui a scorrere ogni lettera cade per conto suo, girando un poco e sparendo, e al centro
   una frase sola si scrive da sinistra, con le ultime lettere ancora in disordine. */
gsap.registerPlugin(ScrollTrigger, SplitText);

/* ---- valori da cambiare ---- */
const SEGNI = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$()!?"§&<>@*+-';
const VELOCE = 3400;        /* pixel al secondo di scorrimento che fanno tremare al massimo */
const TREMA_MAX = 0.45;     /* il tremore più forte, da 0 a 1 */
const FINESTRA = 22;        /* quante lettere sono nella finestra che trema */
const OGNI = 8;             /* ogni quanti fotogrammi (a 60 al secondo) cambiano i segni */
const CADUTA = [40, 160];   /* di quanti pixel cade una lettera, da e a */
const CODA = 4;             /* quanti segni in disordine in testa alla frase che si scrive */

const RIDOTTO = matchMedia('(prefers-reduced-motion: reduce)').matches;
const sezione = document.querySelector('[data-manifesto]');
const blocchi = [...sezione.querySelectorAll('.blocco')];
const frase = sezione.querySelector('[data-frase]');
const caso = (a, b) => a + Math.random() * (b - a);
const segno = () => SEGNI[Math.floor(Math.random() * SEGNI.length)];

/* ogni lettera tiene la sua larghezza, in em: quando cambia segno le vicine non si spostano */
function dividi(el) {
  const s = SplitText.create(el, { type: 'words,chars', tag: 'span', charsClass: 'segno' });

Il codice di questa animazione è nell’accesso a vita.

L’anteprima resta libera: guardala, rallentala, provala sul telefono.