Webs interactives on val la pena perdre's

Si només has d'obrir una web d'aquesta guia, tria-la segons el que et vingui de gust fer:

• Crear alguna cosa: Silk, que converteix qualsevol traç en un dibuix simètric.
• Fer música: Blob Opera, un quartet de bombolles cantaires que dirigeixes amb un dit.
• Treure el cap al món: Radio Garden, ràdio en directe des de gairebé qualsevol lloc, que tries fent girar un globus terraqüi.
• Fer un viatge: The Deep Sea, una sola pàgina que recorres cap avall fins al fons de l'oceà.
• Pensar mentre jugues: The Evolution of Trust, mitja hora de teoria de jocs que aprens jugant.

La resta de la guia explica per què val la pena visitar cadascuna de les setze, què cal provar primer i què convé saber abans de començar: quin dispositiu funciona millor, quines necessiten so i els un o dos llocs on alguna cosa costa diners o et demana que comparteixis.

Cinc tipus de web interactiva

«Interactiu» abasta experiències molt diferents. Una joguina per dibuixar i un documental que es recorre fent córrer la pàgina són interactius, però demanen coses diferents, i jutjar-los amb el mateix criteri és injust per a tots dos. Aquesta guia agrupa les setze webs en cinc tipus.

• Joc lliure. Sense objectiu ni recorregut. Tu actues i la web converteix la teva acció en una cosa més rica: un dibuix, un paisatge, una passejada en cotxe. Tu decideixes quan està acabat.
• Instruments. Fets per crear música o so. Funcionen millor quan deixes de provar-los i comences a tocar, i la majoria recompensen més la segona sessió que la primera.
• Finestres al món. El material és real: emissores de ràdio, finestres d'altres persones, el vent d'avui. El teu paper és triar cap on mirar, i el plaer és en el que hi trobes.
• Viatges. Un recorregut dissenyat per una altra persona, que fas al teu ritme fent córrer la pàgina o caient. Aquí la interacció és lleugera, més semblant a passar pàgines que a jugar, i l'ofici és en el ritme.
• Experiments i jocs d'idees. Cadascun gira al voltant d'una pregunta: si una màquina pot llegir un gargot, per què sobreviu la confiança, què passa si et quedes quiet. Jugues per trobar la resposta.

Cap d'aquests tipus no és millor que un altre. Un viatge et pot commoure més que un instrument, i una broma de dos minuts et pot acompanyar més temps que una simulació de mitja hora. Agrupar-les serveix per tenir l'expectativa adequada abans de fer clic.

Les setze d'un cop d'ull

Totes les webs es van obrir en un navegador d'escriptori el 31 d'octubre de 2026. Quinze es van carregar amb normalitat. The Deep Sea va respondre al nostre navegador automatitzat amb una comprovació antibots, de manera que la descripció es basa en el que se n'ha publicat i no en aquella visita.

Joc lliure: comença on vulguis, para quan vulguis

Silk

Silk és obra de Yuri Vishnevsky, amb música i so de Mat Jarvis, i és en línia des de cap al 2010. Arrossegues sobre un llenç fosc i et segueix un fil suau de llum, reflectit i repetit al voltant del centre. Fins i tot un gest descurat torna delicat i simètric, i això la converteix en una de les poques eines de dibuix amb què ningú no sent que «no sap dibuixar».

El que la fa més que un salvapantalles són els controls. Pots canviar quantes vegades es repeteix el traç al voltant del centre, activar o desactivar el mirall, fer que els traços girin en espiral cap endins i arrossegar uns colors sobre uns altres per barrejar-los. Cada ajust canvia la regla per on passa el teu gest, de manera que el mateix moviment dona dibuixos molt diferents.

Prova primer: dibuixa una línia lenta des del centre cap enfora, i després la mateixa línia ràpida. Llavors desactiva el mirall i torna a dibuixar. Ideal per a: qualsevol persona que vulgui fer una cosa bonica en un minut, i per a infants. De Yuri Vishnevsky · Obre Silk

Thisissand

Thisissand té un sol gest: prems, i des d'aquell punt cau sorra que es va amuntegant. Canvia de color sobre la marxa i les capes s'acumulen fins que semblen el tall d'un vessant. El plaer és en la física: els grans rellisquen fins que el pendent els pot sostenir, de manera que cada munt s'assenta amb un angle semblant, i les teves decisions queden a la vista com a estrats.

La web també té una galeria de paisatges de sorra recents i populars, un flux automàtic opcional que manté la sorra caient (amb un doble toc al llenç) i una aplicació amb perfils per a qui vulgui conservar la seva obra. Res d'això no és necessari per jugar.

Prova primer: tria només dos colors i alterna'ls en capes fines. Millor en: una pantalla tàctil, on abocar amb el dit resulta més físic. Ideal per a: una atenció lenta i absorta. Obre Thisissand

El portafolis de Bruno Simon

El portafolis de Bruno Simon és una web que es condueix. Els projectes d'aquest desenvolupador estan repartits per una petita illa en 3D, i els visites en un cotxe de joguina que manes amb el teclat. La primera versió, del 2019, es va construir amb la biblioteca 3D Three.js i la biblioteca de física Cannon.js, i Awwwards la va triar web de l'any 2020. Des d'aleshores s'ha refet.

És aquí perquè mostra fins on pot arribar un navegador: 3D en temps real, física i so, sense instal·lar res. Això també vol dir que exigeix al teu ordinador més que cap altra web d'aquesta guia, de manera que un portàtil o un telèfon antics poden tenir dificultats.

Prova primer: oblida't dels projectes durant un minut i limita't a conduir per l'illa. Ideal per a: qualsevol persona amb curiositat pel que poden construir els desenvolupadors web. Obre el portafolis

Paper Planes

Paper Planes, de l'estudi Active Theory, es va llançar el 2016. En un ordinador et demana que hi entris des del telèfon, i aquesta és la gràcia: des del telèfon llances un avió a un cel compartit i atrapes avions que han llançat desconeguts des d'altres llocs. És una de les poques webs interactives que parlen d'altres persones i no de tu.

Prova primer: atrapa un avió abans de llançar el teu, i mira d'on venia. Millor en: un telèfon. Obre Paper Planes

Instruments: coses que es toquen

Patatap

Patatap, de Jono Brandel amb sons del duo Lullatone, es defineix com un kit portàtil d'animació i so. Cada tecla de la A a la Z, i la barra d'espai, fa sonar un so breu i llança una forma de color per la pantalla; en un telèfon, un toc fa el mateix. En un minut ja toques ritmes, i les animacions fan visible cada so, de manera que la pantalla es converteix en un registre del pols.

La pàgina adverteix que conté imatges amb llampades. Pren-t'ho seriosament si la llum intermitent t'afecta.

Prova primer: tria tres tecles i toca només aquestes, com faria un bateria. Millor amb: un teclat, i els altaveus engegats. De Jono Brandel amb Lullatone · Obre Patatap

Blob Opera

Blob Opera, de David Li amb Google Arts & Culture (2020), posa quatre cantants rodons en un escenari. Arrossega'n un cap amunt o cap avall i canvia de nota; mou-lo i canvia la vocal; els altres tres harmonitzen en temps real. Les veus no són enregistraments empalmats. Provenen d'un model d'aprenentatge automàtic entrenat amb unes setze hores de cant de quatre cantants d'òpera, Christian Joel, Frederick Tong, Joanna Gamble i Olivia Doutney, de manera que el que sents és la idea que el model té de les seves veus seguint la teva mà.

Prova primer: mou només el baix, molt a poc a poc, i escolta com es reorganitzen els altres al seu voltant. Ideal per a: qui creu que no té orella musical. Obre Blob Opera

Chrome Music Lab: Song Maker

Chrome Music Lab és un conjunt d'experiments de Google per al navegador sobre com funciona la música. La peça central és Song Maker, una quadrícula en què cada columna és un moment en el temps i cada fila, una nota: fes clic a les caselles i un bucle les toca d'esquerra a dreta. Pots canviar l'instrument i el tempo, i desar la cançó per compartir-la.

Aquesta mena de quadrícula, un seqüenciador de passos, és la manera com s'ha escrit bona part de la música electrònica, i Song Maker n'és la introducció més amable que hi ha: la forma d'una melodia es veu d'un cop d'ull.

Prova primer: il·lumina una casella per columna per dibuixar una melodia, i després afegeix-hi una sola nota greu cada quatre columnes. Ideal per a: principiants i aules. Obre Song Maker

Incredibox

Incredibox és obra de l'estudi francès So Far So Good i és en línia des del 2009. Arrossegues icones sobre una filera de beatboxers, i cadascun comença a interpretar una part; combina les parts adequades i desbloqueges seqüències animades. Les mescles desades tenen el seu propi enllaç, i altres jugadors les poden escoltar i votar.

La web ofereix una demo gratuïta amb una selecció dels seus estils musicals; la col·lecció completa és en una aplicació de pagament. Amb la demo n'hi ha prou per entendre per què ha durat tant: converteix l'arranjament d'una cançó en el fet de col·locar personatges en un escenari, de manera que superposar capes, l'habilitat central de la producció musical, esdevé una cosa que pots veure.

Prova primer: afegeix intèrprets d'un en un i treu el primer quan entri el quart. Ideal per a: infants i qualsevol persona a qui agradi experimentar amb els arranjaments. De So Far So Good · Obre Incredibox

Finestres al món

Radio Garden

Radio Garden el van crear Studio Puckey (Jonathan Puckey) i Moniker a Amsterdam, com a projecte de l'Institut Neerlandès d'Imatge i So (Netherlands Institute for Sound and Vision), i es va llançar el desembre del 2016. Fas girar un globus terraqüi cobert de punts de llum; cada punt és una emissora en directe, i quan t'hi atures comença a sonar. Els navegadors solen demanar un clic al botó de reproduir abans que comenci el so.

El que la fa especial és que converteix la geografia en escolta. Gira d'una ciutat a la del costat i la llengua, la música i l'hora del dia canvien sota la teva mà.

Prova primer: atura't en una ciutat on parlin una llengua que no saps, després desplaça't uns quants centenars de quilòmetres i compara. Millor amb: auriculars. Obre Radio Garden

WindowSwap

WindowSwap va néixer durant els confinaments del 2020, quan Sonali Ranjit i Vaishnav Balasubramaniam, una parella que treballava en publicitat a Singapur, van voler treure el cap a la finestra d'una altra persona. Prems un botó i t'apareix la vista des d'algun lloc del món, gravada per qui hi viu: un vídeo de diversos minuts, no pas una emissió en directe, enviat pels mateixos visitants i revisat abans de publicar-se.

La finestra aleatòria és gratuïta. Una modalitat de pagament, All-Access, hi afegeix l'arxiu complet, adreces d'interès, llistes de reproducció i un botó per tornar enrere. També hi pots enviar la teva pròpia finestra.

Prova primer: deixa una finestra reproduint-se de fons uns quants minuts, amb el so activat. Ideal per a: una pausa. De Sonali Ranjit i Vaishnav Balasubramaniam · Obre WindowSwap

earth.nullschool.net

earth.nullschool.net, de Cameron Beccario, és un globus animat amb les condicions del moment. Unes línies en moviment tracen el vent; altres capes mostren els corrents oceànics, la qualitat de l'aire i més coses. Segons les notes del projecte, les dades meteorològiques provenen de previsions calculades per superordinadors que s'actualitzen cada tres hores, les de l'oceà s'actualitzen cada dia, i el codi està publicat a GitHub.

Arrossegues el globus, hi fas zoom i canvies de capa des d'un petit menú. És una visualització de dades, però com que el vent es dibuixa amb partícules en moviment, es llegeix com una pintura viva.

Prova primer: busca al mapa la propera tempesta i segueix-ne el vent. Millor en: una pantalla gran. Obre earth.nullschool.net

Viatges: baixar per la pàgina, o caure

The Deep Sea

The Deep Sea, publicada el 2019 per Neal Agarwal a la seva web neal.fun, és una sola pàgina, llarguíssima, que recorres des de la superfície fins al fons de la fossa Challenger Deep, a gairebé onze quilòmetres de fondària. Un comptador de profunditat t'acompanya mentre baixes i els animals canvien amb cada zona, de manera que fer córrer la pàgina, el gest més corrent del web, es converteix en una sensació de distància.

La teva interacció és mínima, i no hi fa res: l'ofici és en el ritme, en com són de llargs els trams foscos entre un animal i un altre. La resta de neal.fun mereix una tarda. Com s'ha dit més amunt, aquesta descripció es basa en el que s'ha publicat sobre la web, perquè va bloquejar la nostra comprovació automatitzada.

Prova primer: fes córrer la pàgina a un ritme constant, sense saltar-te res, fins que desaparegui la llum. Ideal per a: infants i adults curiosos per igual. De Neal Agarwal · Obre The Deep Sea

Zoomquilt

Zoomquilt, iniciat per Nikolaus Baumgarten el 2004, és una pintura col·lectiva amb un zoom infinit. Més d'una dotzena d'il·lustradors van pintar cadascun una escena que n'amaga la següent a dins, de manera que la imatge cau sense fi cap endins i l'última escena porta de tornada a la primera.

És anterior a gairebé tota la resta d'aquesta guia i és més a prop de l'animació que del joc. Es guanya el seu lloc perquè la idea està portada a terme amb tanta cura que el bucle no deixa veure mai les costures.

Prova primer: mira un bucle complet sense apartar la vista. Millor en: una pantalla gran, a pantalla completa. Obre Zoomquilt

Experiments i jocs d'idees

Quick, Draw!

Quick, Draw!, de Google Creative Lab, et dona una paraula i uns quants segons per dibuixar-la mentre una xarxa neuronal intenta endevinar què dibuixes. És un joc, però també una demostració de com aprèn un model a partir d'exemples. La web ho diu obertament: els teus dibuixos s'afegeixen a un conjunt de dades públic, la col·lecció de gargots més gran del món, així que dibuixa sabent-ho.

Prova primer: després d'una ronda, obre el conjunt de dades i mira uns quants centenars de gats dibuixats per desconeguts, l'un al costat de l'altre. És una petita lliçó sobre com n'és, de diferent, la manera com cada persona s'imagina la mateixa cosa. Obre Quick, Draw!

The Evolution of Trust

The Evolution of Trust («l'evolució de la confiança»), de Nicky Case (juliol del 2017), és una guia interactiva de teoria de jocs que dura uns trenta minuts. Jugues rondes d'un joc de confiança senzill, una versió del dilema del presoner, contra personatges amb estratègies diferents, i després organitzes tornejos entre poblacions senceres d'aquests personatges. Es basa en The Evolution of Cooperation (1984), de Robert Axelrod. La interacció és l'argument: entens per què la cooperació pot sobreviure perquè acabes d'intentar sobreviure sense.

Està disponible en moltes traduccions fetes per aficionats, entre les quals castellà, francès, alemany, italià i portuguès del Brasil, enllaçades des de la primera pàgina.

Prova primer: juga les primeres rondes amb honestedat, després traeix una vegada i mira què passa. Ideal per a: estudiants, docents i qualsevol persona a qui agradi entendre com funcionen les coses. De Nicky Case · Obre The Evolution of Trust

Pointer Pointer

Pointer Pointer (2012), de l'estudi d'Amsterdam Moniker (Jonathan Puckey, Luna Maurer i Roel Wouters), té una sola regla: mou el cursor i després deixa'l quiet. Al cap d'un moment apareix la fotografia d'una persona real que l'assenyala exactament. Necessita un punter que es pugui quedar quiet sense fer clic, és a dir, un ratolí o un ratolí tàctil; en una pantalla tàctil no hi ha res que es pugui deixar quiet.

Dura un minut i encara fa gràcia al desè intent, perquè l'arxiu de gent que assenyala sembla impossiblement gran. També és una idea enginyosa sobre l'atenció: la web només respon quan t'atures.

Prova primer: posa el cursor en un lloc incòmode, com ara un racó. Obre Pointer Pointer

Quan el cos és el comandament

Un grup més reduït de webs demana alguna cosa més que un ratolí: els teus braços, la teva cara o les teves mans, a través de la càmera. Dues de les més conegudes les va llançar Google el 2018. Semi-Conductor et permetia dirigir una orquestra movent els braços davant d'una càmera web, i Move Mirror buscava fotografies de persones en la mateixa postura que tu. Totes dues consten ara com a inactives, així que no les recomanem aquí, però les seves pàgines encara expliquen com funcionaven.

Synfield, el projecte al qual pertanyen aquestes Stories, n'és un exemple actual. Els seus mons responen a un ratolí, a un dit o, si actives la càmera, a les teves mans. A Liquid Light, un gest deixa una estela que la superfície recorda una estona.

Abans de començar

Uns quants costums milloren qualsevol d'aquestes webs.

1. Llegeix l'única línia d'instruccions. Gairebé totes aquestes webs en tenen exactament una, i sol anomenar el gest al voltant del qual s'ha construït tota la peça.
2. Decideix què fas amb el so. Moltes giren al voltant de l'àudio. Comença amb el volum baix i apuja'l quan sàpigues què pots esperar.
3. Canvia de velocitat. La majoria recompensen un gest lent tant com un de ràpid, i algunes, com Pointer Pointer, només responen quan t'atures.
4. Canvia de dispositiu. Una peça que amb el ratolí sembla una joguina pot semblar un instrument en una pantalla tàctil. Paper Planes només funciona de debò en un telèfon.
5. Revisa què comparteixes. Quick, Draw! desa els teus dibuixos en un conjunt de dades públic; WindowSwap accepta la teva pròpia finestra si decideixes enviar-la. Cap altra web d'aquesta llista no necessita compte.

El que tenen en comú les millors

Si mires les setze en conjunt, hi apareix un patró. Cap no et demana que aprenguis una interfície. Cadascuna es construeix al voltant d'una sola acció, arrossegar, prémer una tecla, fer córrer la pàgina, deixar el cursor quiet, i posa tot l'esforç en el que aquesta acció produeix. Les millors, a més, et donen una cosa que no hauries pogut fer tot sol: un cor, el temps de tot un planeta, la vista d'un desconegut, una simetria que no dibuixaries mai a mà.

Si vols conèixer el rerefons d'aquestes experiències, què és l'art interactiu segueix la idea d'una obra que respon al seu públic, des de les primeres peces cinètiques fins al navegador. Si et preguntes per què Silk o un estol de punts poden produir una cosa nova cada vegada, l'art generatiu interactiu examina els sistemes que hi ha a sota.