Animazioni da sito premium con l'AI: la striscia in CSS

Una striscia di testo che scorre all'infinito è l'animazione più facile per dare a un sito l'aria da studio creativo. Con un agente AI la costruisci in circa 30 secondi, in solo HTML e CSS. Qui trovi il prompt pronto, il bug che compare solo sugli schermi grandi e come evitarlo fin dall'inizio.

Cos'è

Si chiama marquee: una fascia di testo o di loghi che attraversa lo schermo da sola e non finisce mai. Pensa alla fascia delle notizie del telegiornale, ma più calma e più curata. Il trucco è uno: scrivi la stessa fila di parole due volte e la fai scivolare verso sinistra di metà della sua larghezza, per sempre.

Un bell'esempio dal vivo è la home di Boc.Studio, studio di branding di Barcellona trovato su siteinspire. Dopo una breve intro arancione arrivi su grandi immagini dei progetti, attraversate a metà da una sottile fascia arancione. Dentro leggi il nome dello studio, una frase sul loro lavoro, le coordinate e la parola Barcelona. Poi di nuovo, e ancora.

Dagli stili della pagina si capisce com'è fatta: un'animazione CSS di 30 secondi, sempre alla stessa velocità, che sposta la fila di esattamente metà della sua larghezza. Dentro, la fila c'è due volte. In una finestra larga 1.440 pixel si muoveva di circa 79 pixel al secondo, abbastanza piano da leggerla. Con la riduzione del movimento attiva, restava ferma.

Perché serve

Un sito può essere fatto bene e sembrare comunque fermo. Una striscia così lo rende vivo senza disturbare, per quattro motivi:

• Non chiede niente. Niente che salta fuori, lampeggia o aspetta un clic. Crea atmosfera, e puoi ignorarla.
• Ha una velocità costante. Lenta e regolare, come musica di sottofondo. Se accelera e rallenta, sembra voler dire qualcosa.
• Va da un bordo all'altro. Tocca i due lati della finestra, così l'occhio la legge come infinita. Fermata a metà sembrerebbe un riquadro.
• Tiene fermo il marchio. Le immagini dietro cambiano, nome e città restano. L'occhio ha un punto a cui appoggiarsi.

E costa pochissimo: niente JavaScript, niente librerie, due file piccoli.

Come si fa

1. Apri una cartella vuota e dai il prompt qui sotto a un agente AI che scrive codice. Noi abbiamo usato Claude Code, con il solo permesso di leggere e scrivere file.
2. Tre livelli. La fascia, una "pista" dentro la fascia e, sulla pista, la stessa lista di testi due volte. La seconda copia ha aria-hidden, un attributo che dice ai lettori di schermo di saltarla: così chi non vede sente la lista una volta sola.
3. Sposta di esattamente metà. La fascia ha overflow hidden, cioè nasconde quello che esce dai bordi. La pista è larga quanto il suo contenuto (max-content), così le parole non vengono schiacciate. In 30 secondi va da zero a meno 50% della sua larghezza, linear (stessa velocità dall'inizio alla fine) e infinite (non si ferma mai). A metà corsa la seconda copia sta dove partiva la prima, quindi quando il giro ricomincia l'occhio non vede il salto.
4. Ogni fila almeno larga quanto lo schermo. Dai alla fila una larghezza minima di 100vw, cioè tutta la finestra, e dividi lo spazio in più tra i testi. È la correzione del bug che vedi più sotto: mettila subito.
5. Rispetta chi riduce il movimento. Alcune persone lo attivano nelle impostazioni del telefono o del computer, perché un movimento continuo dà capogiri o distrae. Con la regola CSS prefers-reduced-motion l'animazione si spegne, la seconda copia sparisce e i testi vanno a capo, così si leggono tutti.
6. Pausa al passaggio del mouse. Costa una riga di CSS e aiuta chi vuole leggere una parola mentre passa.

Pronto da copiare. Sostituisci i testi tra parentesi quadre con i tuoi:

Se hai già una striscia sul sito e vedi un buco, questo è il prompt di correzione che abbiamo usato noi:

Prova piccola

Dieci minuti, tre controlli:

1. Schermo largo. Apri la pagina in una finestra larga 1.920 pixel, poi 2.560. Aspetta la fine di un giro e guarda il lato destro. Se compare un pezzo di fascia vuoto, la fila è troppo corta.
2. Movimento ridotto. Attiva la riduzione del movimento nelle impostazioni del computer e ricarica. La striscia deve stare ferma e ogni parola si deve leggere.
3. Lettore di schermo. Fai leggere la fascia: i testi devono arrivare una volta sola, non due.

Riuscita vuol dire: nessun buco, nessuna parola tagliata, nessuna ripetizione letta ad alta voce.

Nella nostra prova la prima versione, su un portatile, sembrava perfetta. A 1.920 pixel, a fine giro, è comparso un buco arancione sulla destra. Una fila di quattro testi era larga circa 1.650 pixel: due copie riempiono lo schermo solo se ogni copia è larga almeno quanto lo schermo. Il prompt di correzione ha aggiunto poche righe, e il controllo a mano a 1.920 e 2.560 pixel ha confermato che il buco era sparito.

Attenzione a

• Guardare resta un lavoro tuo. Nella nostra prova l'agente non poteva aprire un browser e l'ha detto chiaramente, chiedendo un controllo a mano. Il bug non era nel codice che aveva scritto: era in una misura di schermo che nessuno aveva ancora guardato.
• Niente di importante dentro. Nel marquee metti atmosfera: un nome, uno slogan, una città. Mai qualcosa che serve leggere per usare la pagina.
• La pausa con il mouse aiuta solo chi usa il mouse. Se la striscia si muove a lungo e contiene parole importanti, la scelta più gentile è un piccolo pulsante di pausa.
• Link doppi. Se i testi sono link, lasciali solo nella prima copia, così chi naviga con la tastiera non passa due volte sugli stessi link.
• Una sola per pagina. Un marquee per pagina basta e avanza.

Il passo dopo: scegli una pagina del tuo sito che ti sembra piatta, aggiungi una striscia calma con il tuo nome o il tuo slogan e guardala sullo schermo più grande che hai. Poi, se vuoi un movimento che segue lo scroll, prova lo scroll orizzontale come su Lenis, oppure rifinisci il fondo pagina con un footer da sito premium.

Questa pillola nasce da un articolo di Alek su Medium. Altri effetti pronti da ricostruire, ognuno con il suo prompt, sono su MagpUI, la galleria che Alek sta costruendo: ogni pezzo appartiene al suo autore e rimanda all'originale. Grazie a Boc.Studio per una home che vale la pena studiare.

In breve: Una striscia di testo lenta, costante e da bordo a bordo fa sembrare vivo un sito: l'AI la scrive in 30 secondi, il controllo sugli schermi grandi resta tuo.