Playground

Cose che ho costruito e che mi sembravano troppo interessanti, o troppo "uniche", per farle sparire. Alcune sono finite in produzione, altre no.

01Drive-in cards

Drive-in cards

Path SVG che si trasformano con lo scroll: gli elementi arrivano come furgoncini e diventano card quando si fermano. Passa il mouse su una card per riattivarla. Scorri dentro il riquadro.

Apri ↗Codice ↗

02Spirale aurea

Spirale aurea

500 punti disposti secondo l’angolo aureo, lo stesso schema dei semi di girasole. Un impulso si propaga verso l’esterno all’infinito. Nessuna libreria, solo SVG.

Apri ↗Codice ↗

03Effetti solo CSS

Effetti solo CSS

Un bottone con effetto gelatina e un anello di evidenziazione che ruota, ritagliato da un gradiente conico con mask-composite. Solo CSS, niente JavaScript.

Apri ↗Codice ↗

04Badge sakura

Badge sakura

Un piccolo badge con petali di ciliegio che cadono al suo interno. Le posizioni dei petali sono casuali e generate lato client per evitare problemi di hydration.

Apri ↗Codice ↗

05Time picker

Time picker

Fatto per un progetto cliente dopo che tutti i time picker gratuiti che ho provato avevano qualche problema: valori controllati, scroll su mobile, popover tagliati. Era più veloce scriverne uno: selezione confermata con OK, scorciatoia “adesso”, fasce orarie disabilitabili.

Apri ↗Codice ↗

06Composer con chip

Composer con chip

Scrivi @ e scegli una destinazione: diventa una chip che il cursore non può spezzare. Fatto con Range e Selection del DOM, senza librerie per editor — la palette si aggancia al cursore e il pannello sotto mostra come viene serializzato il messaggio.

Apri ↗Codice ↗

07Transit drag

Transit drag

Una giornata di attività con un treno in mezzo. Trascina il treno (o usa le frecce) e tutti gli orari successivi si ricalcolano: trasferimenti, partenza, l’intero pomeriggio.

Apri ↗Codice ↗