Sfondo a gradiente fluido interattivo in Webflow

Aggiungi uno sfondo a gradiente fluido e interattivo a qualsiasi pagina Webflow — colore liquido che vortica sotto il cursore e reagisce a ogni movimento — con un solo attributo custom e zero codice. È il tipo di sfondo hero che fa sembrare una pagina viva invece che piatta, e lo configuri tutto dal pannello impostazioni di Webflow.

Il bello di questo approccio è che la parte difficile è già fatta. Un componente basato su three.js arriva con default sensati per ogni parametro, quindi il setup minimo è un attributo e sei già live. Quando vuoi personalizzare — colori, softness, flow speed, quanto reagisce al mouse — una GUI nascosta ti fa regolare tutto in tempo reale sulla pagina, così salti quel giro insopportabile di pubblica-controlla-modifica-ripubblica.

E scala da uno sfondo veloce a una hero section completa, dove puoi persino collegare il gradiente a un pulsante CTA perché i suoi colori si accendano su hover. Stesso componente, stessi attributi — solo qualcuno in più.

Come funziona

Tutto ruota attorno a un elemento e a un attributo. Metti un div dove vuoi lo sfondo — la classe non conta affatto — e gli dai fc-fluid-gradient="component". È quello che lo script cerca; marca l’elemento come il canvas su cui l’effetto viene disegnato. Posiziona quel div in assoluto così riempie un genitore con position: relative (una section a 100vh, per dire), e il fluido riempie tutta l’area dietro i tuoi contenuti.

L’effetto in sé è WebGL. Dentro un componente “scripts” ci sono alcuni embed: i primi contengono gli shader — piccoli programmi che girano sulla tua GPU e decidono come disegnare ogni pixel — e l’ultimo contiene lo script che li collega con three.js, una libreria che rende gestibile il 3D nel browser senza scrivere a mano centinaia di righe di WebGL puro. Il motivo per cui non devi configurare nulla per vederlo funzionare è che lo script include un default sensato per ogni singolo parametro, dal brush size al decay fino ai quattro colori. Sovrascrivi solo ciò che ti interessa.

Dato che è un effetto così visivo, la mossa giusta non è indovinare i valori negli attributi — è la GUI integrata. Aggiungi fc-fluid-gradient-gooey="true" e la pagina live guadagna un pannello di controllo dove trascini gli slider e vedi il gradiente rispondere all’istante. Brush size regola quanto sono larghi i vortici d’inchiostro; flow speed è un moltiplicatore globale di quanto velocemente evolve il fluido (a zero lo congeli); la distorsione controlla quanto appare ondulato e psichedelico; softness sfuma le transizioni di colore; idle speed decide quanto si muove senza alcuna interazione. Regoli finché non ti convince, poi riporti quei valori negli attributi.

Lo scenario hero aggiunge un trucco carino: legare lo sfondo a un pulsante. Metti fc-fluid-gradient-cta sulla tua CTA principale e, su hover o focus, l’intensità dei colori del gradiente si moltiplica — sopra uno si accende, sotto uno si smorza. Due attributi compagni, durata ed easing della transizione, controllano quel cambiamento, e i valori dell’easing seguono i nomi di easing di GSAP. Il tranello da ricordare: allinea durata ed easing alla transizione CSS già presente sul pulsante, così l’accensione dei colori e l’animazione hover del pulsante si muovono insieme invece di darsi fastidio.

Come si usa

1. Clona il progetto. Prendi il cloneable Webflow — include la struttura della pagina, lo stile e il componente con gli script, con tutta la documentazione dei parametri in fondo alla pagina clonata.

2. Aggiungi il canvas dello sfondo. Dentro una section con position: relative, aggiungi un div e impostalo a position: absolute, full (tutti gli offset a 0), così riempie la section. Dagli l’attributo fc-fluid-gradient="component". La classe è irrilevante — conta solo l’attributo.

3. Includi il componente con gli script. Trascina sulla pagina il componente “interactive fluid gradient scripts” così vengono caricati gli shader e lo script three.js.

4. Pubblica così com’è. Apri il link live e hai già uno sfondo interattivo funzionante, che gira interamente sui default.

5. Attiva la GUI per regolarlo. Aggiungi fc-fluid-gradient-gooey="true" allo stesso elemento, pubblica e regola i parametri dal vivo sulla pagina finché non ti piace. Annota i valori su cui ti fermi.

6. Applica le tue impostazioni come attributi. Riporta i valori dalla GUI sull’elemento come attributi dei parametri documentati in fondo alla pagina clonata (brush size, flow speed, distorsione, softness, idle speed, i quattro colori e così via). Quelli che non imposti restano al loro default.

7. Collega una CTA (opzionale). Sul pulsante principale, aggiungi fc-fluid-gradient-cta per il boost di intensità su hover/focus, più fc-fluid-gradient-transition-duration e fc-fluid-gradient-transition-easing. Allinea questi due alla transizione CSS già presente sul pulsante così l’effetto risulta fluido.