Effetto Spotlight in Webflow con Filtro Prisma GSAP

Costruisci uno spotlight in Webflow che segue il cursore su un’immagine hero — un cono di luce morbido che rivela la foto dove punti e lascia sciogliere tutto il resto nel buio. Sembra roba da WebGL o da plugin pesante, ma in realtà è solo un gradiente radiale più una delle interazioni più vecchie di Webflow, condita con un pizzico di matematica.

Poi andiamo oltre. Sopra lo spotlight aggiungiamo un’animazione hover con GSAP che scala e ruota leggermente l’immagine, e come gran finale un filtro prisma SVG che scompone l’immagine nei suoi canali rosso, verde e blu e li separa per ottenere un glow premium con shift di colore. Tre tecniche, impilate, che insieme danno una hero che sembra viva davvero.

La parte più bella è quanto ogni pezzo sia abbordabile da solo. Lo spotlight e l’hover sono puro Webflow — zero codice. Il prisma è l’unica parte che richiede uno snippet, ed è già scritto per te nel cloneable. Prendila un livello alla volta e ti porti a casa una manciata di trucchi da riusare ovunque.

Come funziona

Lo spotlight non è affatto luce: è buio con un buco in mezzo. Metti un div a tutto schermo (l’overlay) sopra l’immagine e gli dai un gradiente radiale trasparente al centro e nero ai bordi. Il trucco è stringere gli stop di colore: una sfumatura pigra sembra nebbia, mentre tirare il nero vicino al centro (con un paio di stop semi-trasparenti attorno) ti dà un cerchio di visibilità netto che legge come un vero spotlight. Fondamentale: l’overlay vive tra l’immagine e il contenuto nel navigator, così scurisce la foto ma lascia intatti titolo e testo sopra di essa.

Per farlo seguire il cursore usi l’interazione classica “mouse move over element” sulla sezione, spostando l’overlay da -50vw a 50vw sull’asse X e da -50vh a 50vh sull’asse Y. Sono esattamente le distanze dal centro del viewport a ogni bordo, così il centro dello spotlight cade preciso sotto il puntatore. Alza lo smoothing intorno al 95% e il movimento diventa setoso. Il tranello: un overlay in absolute copre solo il suo genitore, quindi appena si muove scopre un bordo. La soluzione è sovradimensionarlo — larghezza e altezza al 200%, poi offset di -50% in alto e a sinistra per ricentrarlo — così copre sempre il viewport ovunque lo spinga il cursore. Impostare l’overflow della sezione su hidden nasconde tutto ciò che deborda.

Qui dentro c’è anche una lezione sullo stacking context. L’immagine in absolute sta naturalmente sopra un container static, quindi riordinare le cose nel navigator non basta a mettere il contenuto davanti. Dai al main container position: relative e i due elementi condividono lo z-index: auto di default — a quel punto vince l’ordine del DOM, e l’elemento che viene dopo si disegna sopra. È un’impostazione minuscola con una resa enorme, e vale la pena farla propria perché frega tantissime persone.

L’animazione hover mette in mostra le nuove interazioni GSAP. Invece di costruire animazioni separate per “hover in” e “hover out” come ti obbligava il vecchio sistema, ne costruisci una sola (scala l’immagine a 1.1, ruotala di 3°) e imposti due trigger: mouse enter su play e mouse leave su reverse. Poiché riparte dalla posizione attuale invece di ricominciare da capo, entrare e uscire velocemente col cursore risulta continuo e non a scatti. Il prisma è il finale: un filtro SVG (con ID prism-basic) scompone l’immagine nei canali RGB con feColorMatrix, sposta ognuno con feOffset e li ricombina con feBlend. Applicato all’immagine con filter: url(#prism-basic), a riposo non fa nulla perché gli offset sono a zero — i canali si ricompongono alla perfezione. Un piccolo script GSAP prende quei nodi feOffset e anima i loro valori dx/dy all’hover (e al focus, per chi usa la tastiera), separando i colori in quel glow cromatico. Due accortezze: l’embed del filtro deve stare prima della sezione nel DOM così è definito prima di essere richiamato, e lo script va in fondo alla pagina così tutto esiste quando parte.

Come si usa

1. Clona il progetto. Prendi il cloneable di Webflow — arriva con tutta la struttura della hero, il gradiente radiale già tarato, le interazioni e il filtro SVG più lo script GSAP già scritto.

2. Scegli un’immagine ad alto contrasto. L’effetto vive o muore sulla foto. Scegline una con zone di luce e ombra decise, gradienti forti e highlight marcati — le immagini piatte sotto lo spotlight sembrano spente. Il profilo Unsplash di Paweł Czerwiński è una miniera d’oro proprio per questo stile. Imposta l’immagine su width: 100%, height: 100%, object-fit: cover, position: absolute (full), e dai al container che la contiene position: relative così il contenuto resta sopra.

3. Costruisci l’overlay dello spotlight. Aggiungi un div tra l’immagine e il contenuto, mettilo in absolute (full) e dagli un gradiente radiale che va da trasparente al centro a nero ai bordi. Stringi gli stop finché il cerchio di luce non è netto invece che nebbioso, poi scala l’overlay al 200% di larghezza e altezza e spostalo di -50% in alto e a sinistra. Imposta la sezione su height: 100vh, overflow: hidden, position: relative.

4. Fallo seguire il cursore. Sulla sezione, aggiungi un’interazione classica “mouse move over element”. Anima il move transform dell’overlay: -50vw/50vw su X, -50vh/50vh su Y. Alza lo smoothing intorno al 95% e prova in anteprima — lo spotlight dovrebbe scivolare sotto il puntatore.

5. Aggiungi l’animazione hover. Passa alle interazioni GSAP sul bottone. Costruisci una sola animazione custom che ha come target la classe dell’immagine (scala 1.1, rotate 3°, durata 1.5s, easing power1.inOut), poi aggiungi due trigger: mouse enter → play, mouse leave → reverse.

6. Inserisci il filtro prisma. Aggiungi un elemento Embed, incolla il filtro SVG dal cloneable e mettilo prima della sezione nel navigator. Applicalo all’immagine con una custom property filter: url(#prism-basic). Poi aggiungi un secondo Embed con lo script GSAP e mettilo in fondo alla pagina. Lo script individua il bottone tramite un custom attribute (non una classe) così la tua nomenclatura resta libera — marca il bottone nelle sue impostazioni elemento esattamente come si aspetta lo script del cloneable, poi gioca con le costanti dx/dy in cima allo script per regolare lo shift di colore.