Siti web interattivi in cui vale la pena perdersi

Alcuni siti web vogliono che tu legga. Questi vogliono che tu faccia qualcosa, e trasformano una piccola azione, un trascinamento, un tasto, un cursore fermo, in qualcosa che non avresti potuto prevedere. Questa guida ne ordina sedici per tipo di esperienza, così puoi sceglierne uno in base all'umore e non per caso.

Una rete di punti di luce nel mondo Constellation di Synfield, uniti da linee sottili in un cielo scuro.

Se apri un solo sito di questa guida, sceglilo in base a ciò che hai voglia di fare:

  • Creare qualcosa: Silk, che trasforma qualsiasi tratto in un disegno simmetrico.
  • Fare suoni: Blob Opera, un quartetto di blob canterini che dirigi con un dito.
  • Affacciarti sul mondo: Radio Garden, radio in diretta da quasi ovunque, scelta facendo girare un globo.
  • Partire per un viaggio: The Deep Sea, un unico lungo scorrimento fino al fondo dell'oceano.
  • Pensare mentre giochi: The Evolution of Trust, mezz'ora di teoria dei giochi che impari giocandoci.

Il resto della guida spiega che cosa rende ciascuno dei sedici degno di una visita, che cosa provare per primo e che cosa sapere prima di cominciare: quale dispositivo funziona meglio, che cosa ha bisogno dell'audio e i due o tre punti in cui qualcosa costa o ti chiede di condividere.

Cinque tipi di siti web interattivi

«Interattivo» copre esperienze molto diverse. Un gioco per disegnare e un documentario da scorrere sono entrambi interattivi, ma chiedono cose diverse, e giudicarli con lo stesso metro non rende giustizia a nessuno dei due. Questa guida divide i sedici siti in cinque tipi.

  • Gioco libero. Nessun obiettivo, nessun percorso. Agisci, e il sito trasforma la tua azione in qualcosa di più ricco: un disegno, un paesaggio, un giro in auto. Sei tu a decidere quando è finito.
  • Strumenti. Costruiti per fare musica o suoni. Funzionano meglio quando smetti di metterli alla prova e cominci a suonare, e la maggior parte premia la seconda sessione più della prima.
  • Finestre sul mondo. Il materiale è reale: stazioni radio, le finestre di altre persone, il vento di oggi. Il tuo ruolo è scegliere dove guardare, e il piacere sta in ciò che trovi.
  • Viaggi. Un percorso progettato da qualcun altro, che fai al tuo ritmo scorrendo o cadendo. Qui l'interazione è leggera, più simile a sfogliare pagine che a giocare, e il mestiere sta nel ritmo.
  • Esperimenti e giochi di idee. Ognuno è costruito attorno a una domanda: una macchina sa leggere uno scarabocchio? Perché la fiducia sopravvive? Che cosa succede se resti fermo? Giochi per trovare la risposta.
Un grafico che colloca i sedici siti secondo due domande: quanto di ciò che compare lo fai tu, da sinistra a destra, e quanto è guidata l'esperienza, dal basso verso l'alto. I viaggi come The Deep Sea e Zoomquilt stanno in alto a sinistra; gli strumenti come Song Maker e Patatap a destra; Silk e Thisissand in basso a destra; le finestre come WindowSwap ed earth.nullschool.net in basso a sinistra.
I sedici siti collocati secondo due domande: quanto di ciò che compare lo fai tu, e quanto del percorso è deciso per te? È una lettura editoriale, non una misurazione. Diagramma realizzato per questa guida.

Nessuno di questi tipi è migliore di un altro. Un viaggio può commuoverti più di uno strumento, e uno scherzo di due minuti può restarti in mente più a lungo di una simulazione di mezz'ora. Lo scopo della classificazione è creare l'aspettativa giusta prima di fare clic.

I sedici in sintesi

Ogni sito è stato aperto in un browser desktop il 31 ottobre 2026. Quindici si sono caricati normalmente. The Deep Sea ha risposto al nostro browser automatizzato con un controllo anti-bot, quindi la sua descrizione si basa su fonti pubblicate e non su quella visita.

SitoTipoChe cosa faiIdeale conCosto o account
SilkGioco liberoDisegni tratti che vengono specchiati e intrecciatiMouse o touchGratis, senza account
ThisissandGioco liberoVersi sabbia colorata in mucchiTouch o mouseGratis nel browser; app facoltativa
Il portfolio di Bruno SimonGioco liberoGuidi un'auto giocattolo su un'isola 3DTastiera, computer potenteGratis
Paper PlanesGioco liberoLanci e afferri aerei di carta con sconosciutiSmartphoneGratis
PatatapStrumentoPremi tasti che fanno partire suoni e formeTastiera o touchGratis
Blob OperaStrumentoTrascini cantanti per cambiare altezza e vocaleMouse o touchGratis
Chrome Music Lab: Song MakerStrumentoComponi un loop su una grigliaQualsiasiGratis, senza account
IncrediboxStrumentoVesti beatboxer per costruire un branoMouse o touchDemo web gratuita; app a pagamento
Radio GardenFinestraFai girare un globo per sintonizzare radio in direttaQualsiasi, con audioGratis
WindowSwapFinestraApri la finestra di qualcun altroQualsiasiGratis; livello a pagamento facoltativo
earth.nullschool.netFinestraLeggi vento e oceano in tempo reale su un globoSchermo più grandeGratis
The Deep SeaViaggioScorri dalla superficie al fondo dell'oceanoQualsiasiGratis
ZoomquiltViaggioCadi in un dipinto infinitoSchermo più grandeGratis
Quick, Draw!EsperimentoScarabocchi mentre una rete neurale indovinaMouse o touchGratis; i disegni entrano in un dataset pubblico
The Evolution of TrustEsperimentoGiochi turni di un classico gioco sulla fiduciaQualsiasiGratis
Pointer PointerEsperimentoTieni fermo il cursore e qualcuno lo indicaMouse o trackpadGratis

Gioco libero: comincia da dove vuoi, smetti quando vuoi

Silk

Silk è opera di Yuri Vishnevsky, con musica e suoni di Mat Jarvis, ed è online più o meno dal 2010. Trascini su una tela scura e un morbido filo di luce ti segue, specchiato e ripetuto attorno al centro. Anche un gesto distratto torna indietro fine e simmetrico, e per questo è uno dei pochi strumenti di disegno con cui nessuno sente di «non saper disegnare».

Ciò che lo rende più di un salvaschermo sono le sue impostazioni. Puoi cambiare quante volte il tratto si ripete attorno al centro, attivare o disattivare lo specchio, far avvolgere i tratti a spirale verso l'interno e trascinare i colori uno sull'altro per fonderli. Ogni impostazione cambia la regola attraverso cui passa il tuo gesto, così lo stesso movimento dà disegni molto diversi.

A sinistra, una singola linea ondulata disegnata a mano. A destra, la stessa linea ripetuta sei volte attorno a un centro e specchiata, a formare una figura simile a un fiore.
La regola dietro questo tipo di gioco per disegnare: un gesto, specchiato e ruotato sei volte. Un diagramma del principio realizzato per questa guida, non un'immagine di Silk.

Prova per prima cosa: traccia una linea lenta dal centro verso l'esterno, poi la stessa linea veloce. Poi disattiva lo specchio e disegna di nuovo. Ideale per: chi vuole creare qualcosa di bello in un minuto, e per i bambini. Di Yuri Vishnevsky · Apri Silk

Thisissand

Thisissand ha un solo gesto: premi, e da quel punto scende sabbia che si accumula. Cambia colore mentre procedi e gli strati si costruiscono in qualcosa che somiglia alla sezione di un pendio. Il piacere sta nella fisica: i granelli scivolano finché il pendio non riesce a reggerli, così ogni mucchio si assesta con un angolo simile e le tue scelte si vedono come strati.

Sei mucchi sovrapposti di granelli colorati, ognuno assestato in un pendio triangolare, con strati ambra, rosa, viola, acqua e grigi.
Granelli lasciati cadere da alcuni punti con una sola regola: scivola finché non puoi fermarti. Una simulazione realizzata per questa guida per mostrare il principio, non un'immagine di Thisissand.

Il sito ha anche una galleria di paesaggi di sabbia recenti e popolari, un flusso automatico facoltativo che continua a far scendere la sabbia (doppio tocco sulla tela) e un'app con profili per chi vuole conservare i propri lavori. Niente di tutto questo serve per giocare.

Prova per prima cosa: scegli solo due colori e alternali in strati sottili. Ideale su: un touchscreen, dove versare con un dito risulta più fisico. Ideale per: un'attenzione lenta e assorta. Apri Thisissand

Il portfolio di Bruno Simon

Il portfolio di Bruno Simon è un sito web in cui si guida. I progetti dello sviluppatore stanno su una piccola isola 3D, e li visiti con un'auto giocattolo che guidi con la tastiera. La prima versione, del 2019, è stata realizzata con la libreria 3D Three.js e la libreria di fisica Cannon.js ed è stata nominata Sito dell'anno 2020 da Awwwards. Da allora è stata ricostruita.

È qui perché mostra fin dove può spingersi un browser: 3D in tempo reale, fisica e suono, senza installare nulla. Questo significa anche che chiede al tuo computer più di qualsiasi altra cosa in questa guida, quindi un portatile datato o uno smartphone potrebbero faticare.

Prova per prima cosa: ignora i progetti per un minuto e fai solo un giro dell'isola. Ideale per: chiunque sia curioso di vedere che cosa sanno costruire gli sviluppatori web. Apri il portfolio

Paper Planes

Paper Planes, dello studio Active Theory, è stato lanciato nel 2016. Su desktop ti chiede di partecipare dallo smartphone, ed è proprio questo il punto: dallo smartphone lanci un aereo di carta in un cielo condiviso e afferri aerei lanciati da sconosciuti in altri luoghi. È uno dei rari siti web interattivi che parlano degli altri e non di te.

Prova per prima cosa: afferra un aereo prima di lanciarne uno, e guarda da dove arriva. Ideale su: uno smartphone. Apri Paper Planes

Strumenti: cose da suonare

Patatap

Patatap, di Jono Brandel con suoni del duo Lullatone, si definisce un kit portatile di animazioni e suoni. Ogni tasto dalla A alla Z, e la barra spaziatrice, suona un breve suono e lancia una forma colorata sullo schermo; sullo smartphone, un tocco fa lo stesso. In un minuto stai suonando ritmi, e le animazioni rendono visibile ogni suono, così lo schermo diventa una registrazione del tempo.

La pagina avverte che contiene immagini lampeggianti. Prendilo sul serio se la luce intermittente ti dà fastidio.

Prova per prima cosa: scegli tre tasti e suona solo quelli, come farebbe un batterista. Ideale con: una tastiera, a casse accese. Di Jono Brandel con Lullatone · Apri Patatap

Blob Opera

Blob Opera, di David Li con Google Arts & Culture (2020), mette quattro cantanti rotondi su un palco. Trascinane uno in alto o in basso e cambia altezza; spostalo e cambia la sua vocale; gli altri tre armonizzano in tempo reale. Le voci non sono registrazioni cucite insieme. Vengono da un modello di apprendimento automatico addestrato su circa sedici ore di canto di quattro cantanti d'opera, Christian Joel, Frederick Tong, Joanna Gamble e Olivia Doutney, quindi ciò che senti è l'idea che il modello si è fatto delle loro voci mentre seguono la tua mano.

Prova per prima cosa: muovi solo il basso, molto lentamente, e ascolta come gli altri si riorganizzano attorno a lui. Ideale per: chi pensa di non essere musicale. Apri Blob Opera

Chrome Music Lab: Song Maker

Chrome Music Lab è una raccolta di esperimenti per il browser di Google su come funziona la musica. Il suo cuore è Song Maker, una griglia in cui ogni colonna è un momento nel tempo e ogni riga una nota: fai clic sui quadrati e un loop li suona, da sinistra a destra. Puoi cambiare strumento e tempo, e salvare il brano per condividerlo.

Una griglia di sedici colonne e otto righe di quadrati scuri, con una melodia di quadrati viola accesi che sale e scende e alcuni quadrati color acqua che segnano un ritmo in basso. Una barra sopra la colonna sei indica il passo in riproduzione.
Un sequencer a passi: il tempo scorre da sinistra a destra, l'altezza sale dal basso verso l'alto e una testina di lettura scorre in loop. Diagramma del principio realizzato per questa guida.

Questo tipo di griglia, un sequencer a passi, è il modo in cui è stata scritta gran parte della musica elettronica, e Song Maker ne è l'introduzione più dolce: la forma di una melodia si vede a colpo d'occhio.

Prova per prima cosa: accendi un quadrato per colonna per disegnare una melodia, poi aggiungi una sola nota grave ogni quattro colonne. Ideale per: principianti e classi. Apri Song Maker

Incredibox

Incredibox è opera dello studio francese So Far So Good ed è online dal 2009. Trascini delle icone su una fila di beatboxer, e ognuno comincia a eseguire una parte; combinando le parti giuste sblocchi sequenze animate. I mix salvati ricevono un link, e gli altri giocatori possono ascoltarli e votarli.

Il sito offre una demo gratuita con una selezione dei suoi stili musicali; la collezione completa è in un'app a pagamento. La demo basta per capire perché dura da tanto: trasforma l'arrangiamento di un brano nel disporre personaggi su un palco, così la sovrapposizione degli strati, l'abilità centrale della produzione, diventa qualcosa che si vede.

Prova per prima cosa: aggiungi i personaggi uno alla volta e togli il primo quando entra il quarto. Ideale per: i bambini e chiunque ami sperimentare con gli arrangiamenti. Di So Far So Good · Apri Incredibox

Finestre sul mondo

Radio Garden

Radio Garden è stato creato da Studio Puckey (Jonathan Puckey) con Moniker ad Amsterdam, come progetto dell'Istituto olandese per il suono e l'immagine, ed è stato lanciato nel dicembre del 2016. Fai girare un globo coperto di punti di luce; ogni punto è una stazione radio in diretta, e fermandoti su uno la ascolti. Di solito i browser richiedono un clic su play prima che parta l'audio.

Ciò che lo rende speciale è che trasforma la geografia in ascolto. Gira da una città a quella vicina e la lingua, la musica e l'ora del giorno cambiano sotto la tua mano.

Prova per prima cosa: fermati su una città di cui non parli la lingua, poi spostati di qualche centinaio di chilometri e confronta. Ideale con: le cuffie. Apri Radio Garden

WindowSwap

WindowSwap è nato durante i lockdown del 2020, quando Sonali Ranjit e Vaishnav Balasubramaniam, una coppia che lavorava nella pubblicità a Singapore, volevano guardare fuori dalla finestra di qualcun altro. Premi un pulsante e ottieni una vista da qualche parte nel mondo, filmata da chi ci vive: una clip di alcuni minuti, non una diretta, inviata dai visitatori e controllata prima della pubblicazione.

La finestra casuale è gratuita. Un livello a pagamento, All-Access, aggiunge l'archivio completo, i preferiti, le playlist e un pulsante per tornare indietro. Puoi anche inviare la tua finestra.

Prova per prima cosa: lascia una finestra in sottofondo per qualche minuto, con l'audio acceso. Ideale per: una pausa. Di Sonali Ranjit e Vaishnav Balasubramaniam · Apri WindowSwap

earth.nullschool.net

earth.nullschool.net, di Cameron Beccario, è un globo animato delle condizioni attuali. Linee in movimento tracciano il vento; altri livelli mostrano le correnti oceaniche, la qualità dell'aria e altro. Secondo le note del progetto, il meteo viene da previsioni elaborate da supercomputer e aggiornate ogni tre ore, i dati oceanici ogni giorno, e il codice è pubblicato su GitHub.

Trascini il globo, zoomi e cambi livello da un piccolo menu. È una visualizzazione di dati, ma poiché il vento è disegnato come particelle in movimento, si legge come un dipinto vivo.

Prova per prima cosa: trova sulla mappa la prossima tempesta e segui il suo vento. Ideale su: uno schermo grande. Apri earth.nullschool.net

Viaggi: scorrere o cadere

The Deep Sea

The Deep Sea, pubblicato nel 2019 da Neal Agarwal sul suo sito neal.fun, è un unico lungo scorrimento dalla superficie al fondo dell'abisso Challenger, a quasi undici chilometri di profondità. Un contatore di profondità ti accompagna nella discesa e gli animali cambiano con la zona, così lo scorrimento, il gesto più comune del web, diventa una sensazione di distanza.

La tua interazione è minima e va bene così: il mestiere sta nel ritmo, in quanto si allungano i tratti bui tra un animale e l'altro. Il resto di neal.fun merita un pomeriggio. Come detto sopra, questa descrizione si basa su fonti pubblicate, perché il sito ha bloccato il nostro controllo automatizzato.

Prova per prima cosa: scorri a ritmo costante, senza saltare, finché la luce non scompare. Ideale per: bambini curiosi e adulti allo stesso modo. Di Neal Agarwal · Apri The Deep Sea

Zoomquilt

Zoomquilt, avviato da Nikolaus Baumgarten nel 2004, è un dipinto collettivo con uno zoom infinito. Più di una decina di illustratori hanno dipinto ciascuno una scena che nasconde dentro di sé la successiva, così l'immagine cade all'infinito verso l'interno e l'ultima scena riporta alla prima.

Una serie di rettangoli arrotondati, ognuno più piccolo e posto dentro il precedente, con contorni rosa, viola, acqua, blu e ambra, che si allontanano verso un punto.
Ogni immagine contiene la successiva, e l'ultima contiene la prima. Diagramma del principio realizzato per questa guida.

È precedente a quasi tutto il resto di questa guida ed è più vicino all'animazione che al gioco. Si guadagna il suo posto perché l'idea è portata avanti con tanta cura che il loop non mostra mai le sue cuciture.

Prova per prima cosa: guarda un loop completo senza distogliere lo sguardo. Ideale su: uno schermo grande, a schermo intero. Apri Zoomquilt

Esperimenti e giochi di idee

Quick, Draw!

Quick, Draw!, di Google Creative Lab, ti dà una parola e pochi secondi per disegnarla, mentre una rete neurale cerca di indovinare che cosa stai disegnando. È un gioco, ma anche una dimostrazione di come un modello impara dagli esempi. Il sito lo dice apertamente: i tuoi disegni vengono aggiunti a un dataset pubblico, la più grande raccolta di scarabocchi al mondo, quindi disegna sapendolo.

Prova per prima cosa: dopo un turno, apri il dataset e guarda qualche centinaio di gatti disegnati da sconosciuti, uno accanto all'altro. È una piccola lezione su quanto diversamente le persone immaginano la stessa cosa. Apri Quick, Draw!

The Evolution of Trust

The Evolution of Trust, di Nicky Case (luglio 2017), è una guida interattiva alla teoria dei giochi che richiede circa trenta minuti. Giochi turni di un semplice gioco sulla fiducia, una versione del dilemma del prigioniero, contro personaggi con strategie diverse, poi fai disputare tornei tra intere popolazioni di loro. Si ispira a The Evolution of Cooperation di Robert Axelrod (1984). L'interazione è l'argomentazione: capisci perché la cooperazione può sopravvivere perché hai appena provato a sopravvivere senza.

È disponibile in molte traduzioni dei fan, tra cui spagnolo, francese, tedesco, italiano e portoghese brasiliano, con i link nella prima pagina.

Prova per prima cosa: gioca i primi turni onestamente, poi tradisci una volta e guarda che cosa succede. Ideale per: studenti, insegnanti e chiunque ami capire come funzionano le cose. Di Nicky Case · Apri The Evolution of Trust

Pointer Pointer

Pointer Pointer (2012), dello studio di Amsterdam Moniker (Jonathan Puckey, Luna Maurer e Roel Wouters), ha una sola regola: muovi il cursore, poi tienilo fermo. Dopo un momento compare la fotografia di una persona reale che indica esattamente quel punto. Serve un puntatore che possa restare fermo senza fare clic, quindi mouse o trackpad; su un touchscreen non c'è niente da tenere fermo.

Dura un minuto ed è ancora divertente al decimo tentativo, perché l'archivio di persone che indicano sembra impossibilmente grande. È anche un'idea elegante sull'attenzione: il sito risponde solo quando ti fermi.

Prova per prima cosa: metti il cursore in un punto scomodo, come un angolo. Apri Pointer Pointer

Quando il corpo è il controller

Un gruppo più piccolo di siti chiede più di un mouse: le tue braccia, il tuo viso o le tue mani, attraverso la fotocamera. Due dei più noti sono arrivati da Google nel 2018. Semi-Conductor ti permetteva di dirigere un'orchestra muovendo le braccia davanti alla webcam, e Move Mirror abbinava la tua posa a fotografie di persone nella stessa posizione. Entrambi risultano ormai non più attivi, quindi non li consigliamo qui, ma le loro pagine spiegano ancora come funzionavano.

Synfield, il progetto a cui appartengono queste Storie, è un esempio attuale. I suoi mondi rispondono a un mouse, a un dito o, se accendi la fotocamera, alle tue mani. In Liquid Light, un gesto lascia una scia che la superficie ricorda per un po'.

Liquid Light dopo un gesto: un anello di correnti luminose che si allarga sull'acqua scura.
Liquid Light dopo un gesto. Cattura reale di Synfield. Apre la pagina del mondo.

Prima di cominciare

Alcune abitudini rendono migliore qualsiasi di questi siti.

  1. Leggi l'unica riga di istruzioni. La maggior parte di questi siti ne ha esattamente una, e di solito nomina il gesto attorno a cui è costruita l'intera opera.
  2. Decidi per l'audio. Molti sono costruiti attorno al suono. Comincia a volume basso e alzalo quando sai che cosa aspettarti.
  3. Cambia velocità. La maggior parte premia un gesto lento quanto uno veloce, e alcuni, come Pointer Pointer, rispondono solo quando ti fermi.
  4. Cambia dispositivo. Un'opera che con il mouse sembra un giocattolo può sembrare uno strumento su un touchscreen. Paper Planes funziona davvero solo su uno smartphone.
  5. Controlla che cosa condividi. Quick, Draw! conserva i tuoi disegni in un dataset pubblico; WindowSwap accetta la tua finestra se scegli di inviarne una. Nient'altro qui richiede un account.

Che cosa hanno in comune i migliori

Se guardi i sedici nel loro insieme, emerge uno schema. Nessuno ti chiede di imparare un'interfaccia. Ognuno è costruito attorno a una sola azione, un trascinamento, un tasto, uno scorrimento, un cursore fermo, e mette il suo impegno in ciò che quell'azione produce. I migliori ti danno anche qualcosa che da solo non avresti potuto fare: un coro, il meteo di un pianeta, la vista di uno sconosciuto, una simmetria che a mano non disegneresti mai.

Se vuoi conoscere il contesto di queste esperienze, che cos'è l'arte interattiva ripercorre l'idea di un'opera che risponde al suo pubblico, dalle prime opere cinetiche fino al browser. Se ti incuriosisce perché Silk o uno stormo di punti possano produrre ogni volta qualcosa di nuovo, l'arte generativa interattiva guarda i sistemi che ci stanno sotto.

Entra in Liquid LightTutte le storie