Un sito senza framework, con un po' di GLSL

Per questo sito non ho usato né un framework né un template. Volevo che fosse veloce, leggibile da chiunque e mio: una cartella di file che apri con un editor di testo.

Le curve nello sfondo

Lo sfondo dell'inizio è un campo di curve di livello, come quelle delle mappe, che si muove piano e reagisce al cursore. Lo calcola la scheda video con uno shader:

si parte da un rumore morbido (fbm, somma di rumori a scale diverse);
si deforma lo spazio col rumore stesso, per avere forme che sembrano geografia;
si disegna una linea ogni volta che il valore attraversa un numero intero.

Il trucco per avere linee sempre sottili, anche dove il campo è ripido, è misurare la larghezza con fwidth: la linea occupa circa un pixel dappertutto, invece di sbavare.

Il titolo vivo

"Fritz" è scritto con un font variabile. Ogni lettera calcola la distanza dal cursore e cambia il proprio peso tra sottile e grassetto. Senza mouse, le lettere respirano da sole con un'onda lenta.

Un sito che si usa da tastiera

Ctrl K (o ⌘ K, o /) apre una palette di comandi: cerchi una sezione o un progetto e vai.
I dettagli dei progetti sono un elemento <dialog>: la tastiera, il focus e il tasto Esc funzionano senza scrivere una riga.
I filtri dei progetti usano le View Transitions del browser: le schede scivolano al loro posto.

Regole che mi sono dato

Nessun codice di terzi nelle pagine, e una politica di sicurezza (CSP) che lo impedisce.
Chi ha attivato "riduci animazioni" non vede nulla di animato.
Controllo automatico dell'accessibilità (axe) a zero problemi, sia in tema scuro sia in tema chiaro.
Se la scheda video non supporta WebGL2, resta uno sfondo a sfumature: il sito si legge uguale.

Cosa non ho fatto

Non l'ho provato con un lettore di schermo vero, e solo su browser basati su Chromium. Sono le prime due cose che voglio sistemare.