Quei fondali che si muovono come metallo liquido, i gradienti che respirano sotto il titolo di una landing page o la scia luminosa che segue il cursore hanno una cosa in comune. Sono shader, piccoli programmi eseguiti dalla scheda video che calcolano il colore di ogni singolo pixel decine di volte al secondo. Fino a ieri restavano un territorio per specialisti, perché richiedono matematica, linguaggi poco amichevoli e parecchia pazienza.
Shaders facilita questo compito con una libreria che trasforma oltre duecento effetti grafici in componenti pronti da inserire in una pagina web, come si farebbe con un pulsante o un menu. Il 6 ottobre 2026 la società che la sviluppa, Shader Effects Inc., ha annunciato su X il passaggio all’open source con licenza MIT.
La libreria si appoggia a WebGPU, l’interfaccia moderna che dà ai browser accesso diretto alla scheda grafica, e funziona con React, Vue, Svelte, Solid e JavaScript senza framework. Accanto alla libreria c’è un editor visuale gratuito su shaders.com, che permette di comporre gli effetti trascinando livelli e regolando cursori, per poi esportare il risultato pronto all’uso. La novità interessa tanto chi sviluppa siti per lavoro quanto chi gestisce un blog e vuole una pagina che si distingua, senza diventare un esperto di grafica 3D.
Cos’è uno shader e perché WebGPU fa la differenza
Per capire cosa offre Shaders conviene partire da come funziona un effetto grafico nel browser. Uno shader è una ricetta che vale per ogni singolo pixel, e il trucco sta nel modo in cui viene eseguita. La GPU, cioè il processore della scheda video, la applica a milioni di punti nello stesso momento, ed è per questo che riesce ad animare un fumo realistico o una superficie di vetro senza rallentare la pagina.
Per anni lo strumento standard è stato WebGL, nato nel 2011 e ispirato a tecnologie ancora più vecchie. WebGPU ne prende il posto con un’architettura più vicina a quella delle schede grafiche attuali, più efficiente e pensata anche per i calcoli generici. Gli shader per WebGPU si scrivono in WGSL, un linguaggio che resta comunque materia per pochi.
Shaders nasconde tutta questa complessità dietro una logica a livelli, simile a quella di Photoshop. Il componente principale, chiamato Shader, crea l’area di disegno, mentre gli effetti inseriti al suo interno si sovrappongono nell’ordine in cui li scrivi e vengono combinati direttamente dalla scheda video. Puoi annidarli, miscelarli con diversi metodi di fusione e usare un effetto come maschera di un altro.
Il vantaggio è evidente anche per chi non scrive codice tutti i giorni. Un gradiente con una scia che segue il mouse richiede due righe, una per ciascun effetto:
import { Shader, LinearGradient, CursorTrail } from 'shaders/react'
<Shader className="w-full h-64">
<LinearGradient colorA="#0f172a" colorB="#7c3aed" />
<CursorTrail />
</Shader>
Con Vue, Svelte o Solid cambiano solo l’importazione e qualche dettaglio di sintassi, perché le proprietà degli effetti sono identiche in tutti i framework.
Installazione e primi effetti, anche senza framework
In un progetto moderno basato su Vite, Next.js, Nuxt o strumenti simili basta un solo comando:
npm install shaders
Da quel momento importi gli effetti dal percorso del tuo framework, ovvero shaders/react, shaders/vue, shaders/svelte, shaders/solid oppure shaders/js per il JavaScript puro. La libreria è scritta in TypeScript, quindi l’ambiente di sviluppo suggerisce in automatico i nomi delle proprietà e i valori ammessi.
La parte che trovo più utile per chi gestisce un sito tradizionale, però, è un’altra. Shaders funziona anche in una pagina HTML qualsiasi, senza installare nulla, caricando la libreria da jsDelivr. Questo è il codice con cui ho fatto il test:
<canvas id="sfondo" style="width:100%;height:400px"></canvas>
<script type="module">
import { createShader } from 'https://cdn.jsdelivr.net/npm/[email protected]/js/+esm'
await createShader(document.getElementById('sfondo'), {
components: [
{ type: 'LinearGradient', props: { colorA: '#0f172a', colorB: '#7c3aed' } },
{ type: 'CursorTrail' },
],
})
</script>
Con la versione 4.0.2, sul mio PC Windows con una scheda NVIDIA di architettura Pascal, la libreria si è scaricata in circa un secondo e il gradiente è comparso subito.
Quella riga di importazione scarica da jsDelivr un unico file da 684 KB compressi, che diventano 2,5 MB una volta decompressi dal browser, perché contiene l’intero catalogo di effetti anche se la pagina ne usa solo due.
È un peso da tenere presente, soprattutto per i visitatori da smartphone. Se usi un bundler, cioè lo strumento che impacchetta il codice del sito, conviene quindi controllare la dimensione finale dopo la compilazione, mentre il caricamento da CDN resta comodo per prove, prototipi e pagine singole.
Il catalogo: vetro, metallo, fumo e transizioni
Nel repository ci sono circa 200 componenti, ciascuno con una cartella dedicata.
- Gradienti e sfondi. Sfumature lineari, radiali, coniche e a maglia, aurore, nebulose e fondali da studio fotografico.
- Materiali. Vetro liscio e scanalato, metallo liquido, cromo, marmo, ossidiana, carta, lana e fibra di carbonio.
- Natura e fluidi. Fumo, nebbia, acqua, inchiostro, acquerello e simulazioni di diffusione chimica.
- Stili e filtri. Mezzatinta, incisione, ASCII, schermo CRT, VHS, pellicola cinematografica e glitch.
- Transizioni e cursore. Tendine, dissolvenze a blocchi, pagine che si girano, increspature e scie che seguono il mouse.
Accanto ai generatori ci sono i modificatori, cioè livelli che lavorano su ciò che sta sotto di loro, come sfocature, distorsioni e correzioni di colore. Alcuni componenti accettano anche contenuti esterni. Puoi usare come sorgente un’immagine, un video, la webcam o perfino un testo, e applicarci sopra vetro, deformazioni o mezzetinte.
Le proprietà di ogni effetto si possono collegare al movimento del cursore, a una linea temporale o allo stato dell’applicazione. Un pulsante può quindi accendere un bagliore al passaggio del mouse, o un fondale può cambiare colore mentre scorri la pagina, sempre senza scrivere una riga di codice.
Sono effetti che vanno usati con misura. Un effetto ben scelto dà carattere a una pagina, tre animazioni sovrapposte in ogni sezione la rendono invece stancante e pesante da far girare.
Editor visuale, riga di comando e agenti AI
L’area di progettazione di shaders.com è una tela infinita dove impili i livelli, regoli ogni parametro con cursori e selettori di colore e vedi il risultato in tempo reale. Il pulsante Export Code genera l’albero di componenti per il framework che preferisci, da incollare nel sito. Chi sviluppa un’applicazione completa può usare la CLI, lo strumento da terminale che collega il codice al profilo personale:
npx shaders connect # collega la cartella a un progetto di shaders.com
npx shaders install # scarica gli effetti scelti come file di componenti
npx shaders search "vetro" # cerca un preset descrivendolo a parole
npx shaders update # importa le modifiche fatte nell'editor
Il programma riconosce da solo il framework, scrive i file nella cartella dei componenti e annota in un file di riepilogo, il cosiddetto lock file, cosa ha installato. Non occorre installare nulla in modo permanente.
L’aspetto più attuale riguarda gli assistenti di programmazione. Shaders offre un server MCP (Model Context Protocol), cioè un ponte che permette agli agenti AI di usare strumenti esterni, installabile con npx shaders@latest install-mcp in Claude Code, Cursor, Codex, Windsurf, Copilot, OpenCode e altri.
In alternativa c’è una skill che insegna all’agente il catalogo e il modo di comporre i livelli. In pratica puoi chiedere «aggiungi alla home un fondale di vetro smerigliato che reagisce al mouse» e lasciare che sia l’assistente a scegliere gli effetti giusti dalla libreria Shader.
Browser compatibili, telemetria e alternative statiche
La scelta di WebGPU porta con sé un limite preciso. Shaders funziona solo con WebGPU e non ha un ripiego su WebGL, quindi la compatibilità dipende dal browser e dalla piattaforma di chi visita il sito:
- Chrome ed Edge. Funzionano su Windows, macOS e ChromeOS, oltre che su Android 12 o successivi con molti processori recenti.
- Safari. Serve la versione 26, presente sui Mac aggiornati a Tahoe e su iPhone e iPad con iOS 26.
- Firefox. Attivo sul sistema di Microsoft dalla versione 141 e sui Mac con chip Apple, mentre sugli altri sistemi è ancora sperimentale.
- Linux. Chrome e Chromium funzionano solo con alcune schede grafiche, per le altre servono opzioni sperimentali.
Se il dispositivo non supporta WebGPU, l’area dell’effetto resta trasparente e la console non si riempie di errori, così la pagina continua a funzionare. Tramite la funzione onUnavailable puoi mostrare al suo posto un’immagine statica o un gradiente CSS, e ti consiglio di farlo sempre, perché una parte dei visitatori vedrà comunque la versione di riserva.
La libreria attiva di default anche una telemetria che, sul 5% delle visualizzazioni scelte a caso, raccoglie per cinque secondi dati sulle prestazioni (fotogrammi al secondo, tempi di disegno, nomi degli effetti usati) insieme al dominio del sito, alla famiglia del browser e al tipo di dispositivo, e li invia a shaders.com.
Nei dati inviati non compaiono informazioni personali dirette e il sistema rispetta l’impostazione Do Not Track del browser. Chi gestisce un sito rivolto al pubblico europeo, attento al regolamento sulla privacy, farà comunque bene a disattivare la telemetria con la proprietà disableTelemetry nei componenti o con { disableTelemetry: true } come terzo argomento di createShader.
Cosa resta gratuito e cosa si paga
La licenza MIT copre il motore, tutti i componenti e i collegamenti ai framework, quindi puoi usarli gratis anche in progetti commerciali, siti per clienti, temi e prodotti in vendita. L’editor visuale, l’esportazione del codice, la CLI e il server MCP non costano nulla. L’abbonamento Pro, che costa 199 dollari l’anno oppure una cifra unica a vita, aggiunge invece una raccolta di oltre mille preset (invece dei circa 200) già rifiniti e più di cinquanta sezioni di siti complete.
È un modello che conosciamo bene, con il motore libero e il catalogo curato a pagamento, e mi sembra equilibrato, dato che tutto il necessario per creare un effetto da zero resta fuori dall’abbonamento. I programmatori più curiosi possono scrivere effetti propri con la funzione defineShader, indicando nome, proprietà e il calcolo da eseguire per ogni pixel in WGSL.
Poche righe di HTML per portare WebGPU in una pagina web
Dopo Three.js, Shaders è l’ennesima conferma che WebGPU, a lungo solo annunciata, è ormai una tecnologia che chiunque può sperimentare. Il passaggio all’open source toglie anche l’ultimo dubbio per agenzie e professionisti che realizzano siti su commissione. Con la licenza MIT un effetto creato oggi resterà utilizzabile domani, indipendentemente dalle scelte commerciali dell’azienda, e il codice si può leggere, modificare e verificare.
Restano i limiti da gestire con buon senso, a partire dalla compatibilità dei browser e dall’alternativa statica da prevedere sempre. Il peso della libreria e il consumo della scheda video sui telefoni consigliano inoltre di riservare gli shader ai punti in cui fanno la differenza, come l’apertura di una pagina o una sezione che deve restare impressa.
