Effetto glitch sul logo in hover in Webflow (no-code)

Hai presente quegli effetti glitch cromatici sui logo — quelli in cui le lettere si sdoppiano un attimo in fantasmi rossi e blu, come un segnale che si rompe? Questa lezione costruisce esattamente quello in Webflow, come effetto hover per il logo del tuo brand, senza una riga di codice custom. Solo livelli sovrapposti, un paio di filtri CSS e una singola interazione nativa.

Il trucco non è complicato una volta che vedi il setup che c’è sotto. Tutto ruota attorno a tre copie dello stesso logo e all’idea che un “glitch” in realtà sono solo due livelli colorati nascosti che lampeggiano leggermente fuori allineamento. Azzecca la struttura e l’animazione diventa quasi meccanica da costruire.

È un tocco perfetto per il logo nel brand link della tua navbar — discreto da fermo, vivo nell’istante in cui qualcuno ci passa sopra.

Come funziona

Il layout. Il cuore del build è il logo wrapper — in un sito vero è il brand link dentro la navbar. È impostato su position: relative perché contiene alcune immagini in posizione assoluta. Al suo interno ci sono tre elementi immagine del logo, che condividono una base class (height 100%, cursor pointer) e ognuno con la propria combo class: layer 0, layer 1 e layer 2.

I tre livelli. layer 0 è il primo piano — la copia nitida che leggi davvero. È su position: relative così sta sopra gli altri due. layer 1 e layer 2 sono su position: absolute, quindi si impilano perfettamente dietro il primo piano invece di spostarlo. A renderli diversi è un set di filtri CSS che tintano uno di un rosso-bluastro e l’altro di rosso — i valori esatti dei filtri sono frutto del giocare con la piattaforma, non di una formula da memorizzare. Il secondo livello colorato è un SVG incorporato il cui path ha fill: currentColor, così prende il colore dal font color del wrapper — ed è questo che fa funzionare il tutto con qualsiasi colore, non solo il bianco.

L’idea dietro il movimento. In hover riveli per un attimo i due livelli colorati più in profondità e li muovi a scatti, in piccoli passi apparentemente casuali, mentre il primo piano bianco riceve un minimo di blur. Poiché i movimenti sono brevissimi e saltano a scostamenti piccoli, non scivolano — tartagliano. Quel tartagliare è il glitch. Quando finisce, entrambi i livelli colorati tornano nascosti e il logo scatta di nuovo nitido e fermo.

Come si usa

1. Prepara il wrapper e i livelli. Dai al logo wrapper position: relative. Al suo interno metti tre copie del logo che condividono una base class (height 100%, cursor pointer). Aggiungi una combo class a ciascuna: layer 0 (position: relative, in cima), layer 1 e layer 2 (position: absolute). Tinta layer 1 e layer 2 con i filtri CSS finché uno legge rossastro e l’altro bluastro. Per un logo flessibile nel colore, incorpora il primo piano come SVG con fill: currentColor.

2. Crea l’interazione. Nel pannello interazioni aggiungi un’interazione Mouse hover sul logo wrapper. Ti serve solo lo stato on hover → Start an animation → creane una nuova, es. “Logo glitch animation”.

3. Imposta lo stato iniziale. Aggiungi una action hide/show su layer 1, imposta display su Hidden e segnala come initial state. Fai lo stesso per layer 2. Per il primo piano (layer 0), aggiungi una action filter con un blur a 0 e segnala come initial state.

4. Anima il livello rosso (layer 1). Aggiungi una hide/show per portare il display a block, poi aggiungi cinque action move, ciascuna con durata 0.06s ed easing ease, passando per questi scostamenti X/Y: (2.5%, -5%), (-2.5%, 2.5%), (-2.5%, -2.5%), (-2.5%, 2.5%), (0%, 0%). Poi seleziona tutti e cinque i move, duplicali, trascina le copie subito dopo l’ultimo move e imposta il loro timing su after previous action così il tartagliamento va in scena due volte. Chiudi con una hide/show che riporta il display a none.

5. Anima il livello blu (layer 2). Aggiungi una hide/show per portare il display a block, poi cinque action move (durata 0.06s, easing ease) trascinate sui primi cinque keyframe, con scostamenti: (-5%, 7.5%), (-2.5%, -2.5%), (2.5%, 5%), (2.5%, 2.5%), (0%, 0%). Duplica ciascuna e lascia le copie sui keyframe successivi corrispondenti, poi aggiungi una hide/show finale per nascondere di nuovo il livello.

6. Aggiungi il tocco di blur sul primo piano. Seleziona layer 0, aggiungi una action blur filter sul primo keyframe (durata 0.06s, easing ease, blur 1px), poi duplicala sull’ultimo keyframe con il blur di nuovo a 0px. Questo lieve tremolio sul livello bianco rende il tutto più vivo.

7. Salva, anteprima, riusa. Salva e prova l’hover. Per confermare che è indipendente dal colore, applica la stessa animazione a un secondo logo e cambia il font color del wrapper — grazie a fill: currentColor fa glitch altrettanto bene in qualsiasi colore, anche se i logo bianchi tendono a risultare i più nitidi.