Idea di partenza
Ho costruito gli effetti sfondo del mio portfolio con Canvas API nativa, senza librerie esterne. La scelta non è ideologica: Three.js, GSAP e Particles.js aggiungono peso per funzionalità che su un sito personale non si usano mai interamente. Con l’API nativa controlli ogni frame, ogni path, ogni allocazione.
Il punto di partenza era un elemento di GeneratePress che gestiva un singolo effetto di sfondo. Da lì è nata l’idea di un plugin vero: struttura modulare, effetti intercambiabili, pannello di controllo. Il risultato è wp-background-effects: nove effetti indipendenti (antigravity, matrix, aurora, neural network, deep space, plasma, glitch, constellation), uno switcher glassmorphism, supporto dark/light mode completo. Ogni effetto è un file JS con init(), loop requestAnimationFrame e destroy(). Se uno rompe, non porta con sé nient’altro.
Problematiche e sfide affrontate
Il problema con dark mode. Gli effetti erano tutti calibrati per un fondo scuro. Mettendoli su sfondo chiaro sparivano o diventavano fastidiosi. La soluzione non è stata un toggle di colori generico, ma una calibrazione per-effetto: bgFill di matrix-rain calcolato da hexToRgb(cfg.lightBgColor), alpha separati in constellation, moltiplicatore per l’intensità in aurora. Non c’era una formula universale. Per garantire coerenza con il resto del sito, il plugin include campi repeater in admin che rilevano e gestiscono le variabili CSS custom di GeneratePress: si associa un valore dark e un valore light a ogni custom property, inclusi i Global Colors di GP Premium.
La modalità casuale. Con default_effect = ‘random’ ogni caricamento senza localStorage sceglie un effetto diverso. La chiave è il flag persist in switchEffect(): solo i click espliciti dell’utente nel panel salvano la scelta. Il pulsante 🎲 resetta il localStorage e lancia un nuovo random. In questo modo il sito distingue tra “utente che non ha ancora scelto” e “utente che ha scelto qualcosa” e si comporta di conseguenza.
Le ottimizzazioni. Su mobile entry-level la prima versione consumava CPU in modo visibile. Il collo di bottiglia erano le chiamate stroke() per frame: antigravity, neural-network e constellation arrivavano a 6000 operazioni per frame. Con il batching (tutti i segmenti accumulati in un unico path, una sola chiamata stroke()) si scende a 5-8. Stesso risultato visivo, costo computazionale irrilevante. Altre misure: Page Visibility API su tutti i loop, shadowBlur al posto di createRadialGradient, squared distance invece di Math.sqrt.
Logo e tema chiaro. Il passaggio al tema chiaro gestisce anche il logo: è possibile configurare un logo alternativo caricato via JavaScript al cambio tema, oppure applicare un’inversione CSS del colore originale con un parametro da 0 a 100%.
Puoi testare i vari effetti direttamente sul sito tramite l’icona in basso a destra, oppure cambiare contenuto approfittando della modalità casuale di default, se hai trovato interessante questo progetto scrivimi la tua opinione o se vuoi informazioni a info@davidemugnaini.it