Lab

Come funziona

I dati hanno la stessa forma della risposta 'Place Details' dell'API Google Places (rating, numero recensioni, testo/autore/voto per ogni recensione), per ora mockati (per non esporre una key con costo per richiesta su una pagina pubblica del Lab), ma la logica è già pronta a ricevere dati veri: basta sostituire la funzione che li recupera con una vera chiamata, dietro una key ristretta per dominio o un proxy dedicato come per SkyTracker, a seconda di quanto la key debba restare privata. Il caricamento passa da uno stato 'skeleton' (gestito con gli hook useState/useEffect di React) ai dati veri, per simulare l'attesa reale di una chiamata di rete. Il rating medio frazionario (es. 4.8 su 5) è reso con due righe di stelle sovrapposte, quella rossa ritagliata in percentuale via CSS: nessuna immagine, nessuna libreria di icone. Pattern vendibile a qualunque cliente con una scheda Google Business attiva, a prescindere dal settore.

Come funziona

L'etichetta della lattina cambia scorrendo un'unica immagine sprite dentro il mockup, spostata con una custom property CSS (--left) calcolata in JS dalle dimensioni reali di sprite e contenitore: niente percentuali fisse da ritoccare a ogni modifica grafica. Aggiunto anche lo swipe touch per mobile. Stessa tecnica adattabile a un selettore colore/variante su un e-commerce.

Come funziona

Un modello 3D (.glb) animato con Three.js si muove e ruota seguendo lo scroll della pagina: a ogni sezione che entra a schermo, GSAP anima la posizione e la rotazione del modello verso le coordinate assegnate a quella sezione. Effetto d'impatto per una hero page, ma pesante da caricare (modello 3D + librerie), da usare con parsimonia, un solo pezzo per pagina.

Come funziona

Wizard a 4 step (servizio, data, orario, dati) gestito con lo stato React del componente: ogni passo avanza solo dopo una scelta valida, con un indicatore di progresso che si riempie di rosso mano a mano. Il calendario calcola la griglia del mese a runtime (settimane di 7 celle, lunedì come primo giorno) e blocca automaticamente domeniche e giorni passati; gli orari già 'prenotati' sono calcolati in modo deterministico dalla data scelta, così ogni giorno mostra una disponibilità plausibile e diversa senza un vero backend. La conferma finale disegna un segno di spunta via SVG (stroke-dashoffset animato) e genera al volo un piccolo scoppio di coriandoli in JS, posizionati e colorati casualmente: nessuna libreria, solo elementi assoluti animati via CSS. Stesso principio dei dati mock del widget recensioni: pronto a collegarsi a un vero backend di prenotazione (o a un servizio come cal.com, già usato per Axpro Paintball) sostituendo solo la funzione che genera la disponibilità.

Come funziona

Il pannello di descrizione non entra con un semplice fade, ma con un clip-path: circle() che si espande da un punto fisso via keyframe CSS: dà più carattere al cambio slide. Le card 'in coda' (quella attiva e le due successive in anteprima) sono gestite con classi JS che ne cambiano posizione e scala, un effetto a stack tipico delle vetrine prodotto premium.

Come funziona

L'app chiama l'API meteo esterna non direttamente dal browser, ma tramite un proxy dedicato su Cloudflare Worker che tiene la chiave come secret lato server: il client contatta solo l'URL del Worker, mai l'API reale. Pattern riusabile ogni volta che un sito statico deve consumare un'API a pagamento o con quota senza esporre credenziali nel codice pubblico.

Come funziona

Stesso motore di Animal slider (spostamento DOM + classe CSS temporanea), con schede più ricche: poster, trama, valutazione IMDB e miniature di navigazione. Il logo nell'header vive fuori dal ciclo di animazione delle slide, così non si ridimensiona a ogni cambio slide. Buona base per un catalogo prodotti o portfolio con più metadati per voce.

Come funziona

Le immagini sono ritagliate in cerchi (border-radius: 50%) il cui diametro è una custom property CSS ricalcolata in JS a ogni resize con il teorema di Pitagora sulle dimensioni del contenitore: il cerchio combacia sempre con la diagonale dello slider, a qualunque breakpoint, senza valori scritti a mano. Pattern utile per una galleria fotografica con un tocco più editoriale di uno slider standard.

Come funziona

Slider verticale a pannelli: la navigazione risponde a freccia, rotella del mouse (con un debounce di 600ms per non saltare più slide con un solo gesto) e autoplay a timer, che si resetta a ogni interazione manuale per non litigare con l'utente subito dopo un input. Il movimento è una traslazione CSS (transform: translateY) sincronizzata su due colonne indipendenti. Adatto a un hero 'a capitoli' (collezioni, categorie di servizio) quando lo scroll verticale classico è troppo lento per il messaggio.

Come funziona

Il carosello non anima una traslazione su un contenitore: lo script sposta fisicamente le slide nel DOM (appendChild/prepend), e affida il movimento visivo a una classe CSS temporanea (next/prev) rimossa a fine transizione. Le miniature seguono la stessa logica in parallelo. Zero dipendenze esterne, riusabile per una galleria prodotti o un hero a più immagini su qualsiasi sito statico.