Effetto lente di vetro sui video in Webflow

Trasforma la sezione hero del tuo sito Webflow in una lente di vetro interattiva. Quando un visitatore muove il cursore sul video, l’immagine si piega e si allunga mentre i colori si separano come la luce che attraversa un prisma — per poi tornare dolcemente alla normalità man mano che si allontana. È un effetto WebGL che sembra costoso e gira fluidissimo.

La parte più bella è quanto poco costruisci davvero. Niente JavaScript da modificare: aggiungi un canvas al layout, lo colleghi a un video, incolli uno script già pronto e regoli l’aspetto con una manciata di attributi custom. E dato che il lavoro pesante avviene sulla GPU, resta veloce e scala bene — ancora prima di pensare alle performance, il componente ti copre già le spalle.

Come funziona

L’effetto disegna il tuo video su un canvas HTML e lo distorce in tempo reale, il che significa che il codice ha bisogno di accedere direttamente a ogni fotogramma. È qui il problema con YouTube o Vimeo: servono un player protetto e il browser impedisce di proposito al codice esterno di leggerne i pixel. Quindi invece di un embed ti serve un file MP4 grezzo — e il bello è che Webflow te ne ospita uno. Metti un elemento background video sulla pagina, carica il tuo clip e Webflow mette l’MP4 originale sulla sua CDN con un URL diretto che puoi copiare.

Sul fronte layout ci sono solo un paio di pezzi in movimento. La sezione diventa il riferimento di posizionamento (position: relative) e al suo interno vive un canvas che riempie tutta la sezione in absolute. In Webflow lo crei come custom element, gli dai la classe canvas, poi cambi il suo tag in canvas così diventa una vera superficie di disegno. Un tranello: un canvas posizionato in absolute sta sopra il tuo contenuto, quindi testo e pulsanti smettono di essere cliccabili — la soluzione è mettere anche il main container su position: relative, che riporta il contenuto sopra il canvas.

Tutta la parte visiva gira come shader GPU custom, quindi la distorsione è calcolata sulla tua scheda grafica invece che sul thread principale del browser — ecco perché mantiene stabili i 60fps. Lo script è anche discretamente premuroso: mette in pausa il video e tutto il rendering quando la sezione esce dalla vista con lo scroll, rileva i dispositivi touch e ripiega sul player nativo del mobile invece di caricare pesanti librerie 3D, e scarica quelle librerie solo se la pagina corrente usa davvero l’effetto.

Per la messa a punto, un attributo test accende un pannello di controllo dal vivo dove trascini gli slider per il raggio della lente, la forza della distorsione, la separazione dei colori (gli RGB offset) e l’easing finché non ti sembra giusto. Quei cambiamenti sono temporanei — un refresh li azzera — quindi quando sei soddisfatto riscrivi i valori come attributi e spegni il test. Tutto ciò che non imposti mantiene semplicemente il suo default.

Come si usa

1. Clona il progetto. Prendi il cloneable Webflow — include il layout e lo script completamente documentato. Non devi capire il codice per usare l’effetto.

2. Costruisci il layout. Imposta la sezione su position: relative. Aggiungi un custom element al suo interno, dagli la classe canvas, porta tutti i padding a 0, position: absolute e width/height al 100% così riempie la sezione. Poi cambia il suo tag in canvas.

3. Ottieni un URL diretto del video. Aggiungi temporaneamente un elemento background video al body e carica il tuo video. Quando è pronto, clicca la piccola icona a freccia per aprire il file ospitato in una nuova scheda e copia quell’URL — è il tuo link MP4 diretto. Poi elimina l’elemento background video; il file resta sulla CDN.

4. Ripristina l’interattività. Dato che ora il canvas sta sopra il contenuto, imposta il main container su position: relative così testo e pulsanti tornano cliccabili.

5. Incolla il codice. Ispeziona il cloneable, copia tutto ciò che sta nella sezione before </body> (impostazioni della pagina) e incollalo nello stesso punto del tuo progetto.

6. Collega i tre attributi sul canvas. Aggiungi fc-video-distortion-element="canvas", fc-video-distortion-video impostato sull’URL che hai copiato e fc-video-distortion-test="1" per aprire il pannello di controllo. Vedi il riferimento di configurazione qui sopra per cosa fa ciascuno.

7. Regola, poi rendi permanente. Pubblica, apri il sito live e gioca con il pannello di controllo finché non ami l’aspetto. Per ogni parametro che hai cambiato, aggiungi un attributo custom corrispondente sul canvas (quelli che salti mantengono i default). Infine porta fc-video-distortion-test a 0, pubblica di nuovo e il pannello sparisce — l’effetto di produzione ora gira solo all’hover.

8. (Facoltativo) Aggiungi un overlay per la leggibilità. Metti un div subito dopo il canvas, dagli una classe tipo section_overlay, imposta position: absolute e fallo coprire tutta la sezione, poi applica un gradiente lineare a 90°: un colore scuro al 50% di opacità allo 0%, lo stesso colore allo 0% di opacità al 50% e di nuovo il colore scuro al 50% di opacità al 100%. Il tuo contenuto resta pulito e leggibile su qualsiasi filmato.