Effetto Glow che Segue il Cursore in Webflow

Costruisci un bagliore che segue il cursore su una griglia di card in Webflow — uno di quelli che sembrano una singola luce morbida che scorre su tutto il layout, eppure resta perfettamente ritagliata dentro ogni card. Sembra il tipo di cosa che dovrebbe richiedere un mucchio di JavaScript, e la parte divertente è che davvero non serve.

L’effetto nasce tutto da una combinazione intelligente: un radial gradient in CSS, background-attachment: fixed, una manciata di variabili di Webflow e due classiche interazioni. Una volta che vedi come si incastrano i pezzi, smette di sembrare magia e diventa un sistema che puoi piegare come vuoi — glow più grande, colore diverso, bordo più netto, dissolvenza più morbida.

E la parte migliore: una volta posate le fondamenta, aggiungere il bordo luminoso in cima costa quasi niente. Stessa logica, un div in più, zero animazioni extra.

Come funziona

Il glow non è un div sfocato trascinato in giro. È un radial gradient usato come background image delle card stesse, ed è esattamente per questo che resta sempre ritagliato dentro ogni card — uno sfondo non può traboccare oltre il box su cui è dipinto. Il gradiente si legge più o meno così, con ogni valore preso da una variabile di Webflow:

.section_card {
  background-attachment: fixed;
  background-image: radial-gradient(
    circle at var(--x) var(--y),
    var(--glow),
    transparent var(--glow-size)
  );
}

La chiave di volta è background-attachment: fixed. Normalmente uno sfondo appartiene al suo elemento e si muove con lui. Impostandolo su fixed, lo sfondo viene invece dipinto rispetto al viewport. Così, anche se ogni card ha il suo gradiente, tutti si comportano come finestre ritagliate su un unico sfondo più grande che resta fermo sullo schermo. Muovi il centro di quel gradiente condiviso e sembra un solo bagliore continuo che scivola su tutta la griglia — mentre ogni card continua a ritagliare la sua fetta. È tutta qui, l’illusione.

Siccome il centro del gradiente (--x, --y), il colore (--glow) e la portata (--glow-size) sono tutte variabili di Webflow, guidi l’effetto dal pannello Variabili. Due interazioni le animano. Un Mouse hover sulla sezione fa apparire e sparire il glow spingendo la variabile di opacità da 0% a circa 15% e ritorno — solo desktop, dato che sui dispositivi touch non c’è l’hover. Il vero motore è un’interazione Mouse-move-in-viewport collegata alla pagina, non alla sezione: mappa --x da 0dvw (estrema sinistra) a 100dvw (estrema destra) e --y da 0dvh (alto) a 100dvh (basso), con uno smoothing basso perché il glow segua il cursore da vicino. Vive sulla pagina perché lo sfondo è relativo al viewport — anche il trigger deve seguire il viewport.

Il bordo luminoso è lo stesso sistema riusato. Avvolgi ogni card in un nuovo div, sposta il margine inferiore sul wrapper e dai al wrapper 1px di padding su tutti i lati — quel piccolo spazio simula il bordo, senza nessuna proprietà border. Poi applichi al wrapper lo stesso gradiente, con lo stesso border radius della card così si allineano. L’unica differenza è che la variabile del colore moltiplica l’opacità per cinque, così il bagliore del bordo risulta più netto e brillante. Fondamentale: nessuna nuova animazione: il gradiente del wrapper richiama le stesse --x e --y, quindi l’interazione che hai già costruito guida entrambi i glow in perfetta sincronia.

Come usarlo

1. Clona il progetto. Prendi il progetto clonabile Webflow — arriva con la griglia di card, l’Embed degli stili globali, le variabili ed entrambe le interazioni già collegate.

2. Trova il gradiente. Apri l’elemento Embed degli stili globali. La regola su .section_card imposta background-attachment: fixed e un radial-gradient come background image, con centro, colore e dimensione tutti definiti da variabili di Webflow — ecco il tuo glow.

3. Regolalo dal pannello Variabili. Apri la collezione glow background properties. X e Y (default 50dvw / 50dvh) impostano il centro a riposo del bagliore; opacity controlla l’alpha del colore del glow (parte da 0%, quindi il glow è invisibile finché non fai hover); glow size regola quanto appare esteso e diffuso. Cambia colori, dimensione o l’intervallo di opacità a piacere.

4. Controlla le due interazioni. Il Mouse hover sulla sezione fa variare l’opacità tra 0% e 15% (solo desktop). Il Mouse-move-in-viewport sulla pagina mappa X da 0dvw→100dvw e Y da 0dvh→100dvh; abbassa lo smoothing per un inseguimento più stretto, alzalo per più ritardo.

5. Aggiungi il bordo luminoso (opzionale). Avvolgi una card in un nuovo div con la classe section_card-wrapper, sposta il margine inferiore sul wrapper e dagli 1px di padding, un colore di sfondo quasi trasparente e il border radius della card. Nell’embed CSS, duplica la regola del gradiente per .section_card-wrapper usando la variabile del colore del bordo — nessuna nuova interazione necessaria.

6. Anteprima e gioca. Passa alla modalità anteprima (senza pubblicare) così l’interazione hover può scattare, poi muovi il cursore e guarda il glow viaggiare sulla griglia. Regola colori, glow size, smoothing e l’intervallo di opacità finché non ti convince.