Vai al contenuto

Copious Lab

Uno studio, tanti siti.

La stessa attività, gli stessi prezzi, letti dallo stesso CMS — costruiti in ventuno modi diversi. Ogni design è una pagina funzionante, e ogni nota dice quanto costa in velocità e accessibilità.

Cambia solo il nome; prezzi e servizi restano i nostri. Non viene salvato nulla.

  1. Sito attuale

    Editorial

    • Renderizzato sul server, funziona senza JavaScript
    • JS della home ≈ 139 kB compresso con gzip, niente WebGL
    • WCAG 2.1 AA, verificato con axe in CI

  2. Concetto A

    Spatial studio

    • Un’unica scena WebGL procedurale che cambia a ogni sezione
    • three.js si carica dopo il primo rendering; il testo non lo aspetta mai
    • Con il movimento ridotto si vede un fotogramma fisso; senza WebGL o JS la pagina è semplice HTML

  3. Concetto B

    Terrain

    • Un paesaggio inciso da sorvolare scorrendo; ogni sezione è una diversa forma del terreno
    • Creste e curve di livello a inchiostro su carta, disegnate in un solo shader; il puntatore solleva il suolo
    • I contenuti stanno su tavole di carta piena, così il testo non poggia mai sulle linee

  4. Concetto C

    Facet

    • Un oggetto freddo e cristallino che si compone da schegge mentre si scorre
    • Interfaccia da pannello strumenti: letture in monospazio, testo che si decifra fino a posarsi
    • Ombreggiatura in stile rifrazione, tutta procedurale

  5. Concetto D

    Liquid

    • Un gradiente liquido a tutto schermo che il puntatore mescola
    • Ogni sezione cambia l’umore del colore
    • Morbido e organico, con caratteri grandi e calmi: l’opposto di C

  6. Concetto E

    Bitmap

    • Una natura morta 3D illuminata, retinata con dithering ordinato a due inchiostri; le sezioni si dissolvono cella per cella
    • Il puntatore (o un dito sull’immagine) è una torcia; il servizio o l’impegno con il focus illumina il suo oggetto
    • Ogni parola sta su una finestra di carta piena; senza WebGL subentra un dithering in CSS

  7. Concetto F

    Diorama

    • Una via low-poly di un centro storico al crepuscolo; scorrendo si entra, una stanza per sezione
    • Disegnato a un terzo della risoluzione, con vertici agganciati, texture affini e una palette posterizzata
    • Tutti i contenuti in finestre di dialogo piene; senza WebGL subentra uno skyline al tramonto in CSS

  8. Concetto G

    Glyph

    • Una forma 3D disegnata solo con caratteri, che si trasforma a ogni sezione: nodo, quindici perle, catena, anello sfaccettato
    • Ombreggiata lungo una scala tonale; sulla sagoma, i glifi seguono la forma del contorno
    • Il testo sta su pannelli pieni; senza WebGL o JS subentra un toro ASCII stampato dal server

  9. Concetto H

    Phosphor

    • Il sito come oscilloscopio XY: una nuova figura per sezione, tracciata da un fascio luminoso
    • Segmenti di fascio gaussiani, un buffer ping-pong che decade per la persistenza e un passaggio di bagliore
    • Passi su un servizio (o ne tocchi la figura) per sintonizzare l’oscilloscopio sul suo rapporto; con il movimento ridotto resta una traccia fissa

  10. Concetto I

    Pool

    • Una simulazione di onde dal vivo con rifrazione e caustiche reali, in WebGL
    • I contenuti stanno su cartelli pieni a bordo vasca; l’acqua si vede solo tra uno e l’altro
    • Con il movimento ridotto: un fotogramma fisso di acqua al sole, senza simulazione

  11. Concetto J

    Turing

    • Una simulazione di reazione-diffusione Gray–Scott dal vivo, in WebGL
    • I pannelli di testo sono esclusi dalla simulazione, così il motivo cresce intorno a loro
    • Con il movimento ridotto: la piastra viene fatta crescere al caricamento e mostrata ferma

  12. Concetto K

    Mycelium

    • Una rete di muffa mucillaginosa di ~100.000 agenti sulla GPU che cresce tra i contenuti della pagina
    • Ogni servizio, fase e impegno è cibo; anche il puntatore, e le venature evitano il testo
    • Con il movimento ridotto la rete cresce fuori vista e viene mostrata ferma; senza WebGL, una disegnata

  13. Concetto L

    Loom

    • Una pagina tessuta: scorrendo si tessono nuove file di stoffa su un ordito nudo
    • Ogni sezione è una banda a sé — tela, saia, spina di pesce, panama, pied de poule, raso
    • Un solo fragment shader; l’ordito vibra sotto il puntatore; con il movimento ridotto si vede la stoffa finita

  14. Concetto M

    Copious OS

    • Le sezioni sono vere finestre: trascinare, sovrapporre, ridurre a icona; una colonna senza JS
    • Niente WebGL; un piccolo canvas 2D per lo sfondo con dithering
    • Tastiera: icone e dock sono link e pulsanti, Esc riduce a icona, Alt+W passa alla successiva

  15. Concetto N

    Sheet

    • Il sito come foglio di calcolo; i servizi sono una vera tabella, le schede sono link
    • I tasti freccia spostano la selezione; la barra della formula descrive ogni cella
    • Niente canvas, niente WebGL; barre nelle celle tracciate dai prezzi e dalle durate pubblicati

  16. Concetto O

    Receipt

    • L’intero sito come un unico scontrino termico, che esce dalla stampante mentre si scorre
    • Solo CSS e SVG: animazioni legate allo scorrimento con un piccolo fallback in JS, niente WebGL, niente canvas
    • I servizi sono una vera tabella; si stampa su carta da 80 mm, se lo chiede

  17. Concetto P

    Riso

    • Una fanzine in risografia a due inchiostri: ogni doppia pagina arriva fuori registro e si mette a registro entrando
    • I mezzitoni sono puro CSS (gradienti a punti e contrast()); la grana è un unico filtro SVG di turbolenza
    • Il testo da leggere è sempre inchiostro blu pieno su carta, 7,5:1; il rosa è decorazione

  18. Concetto Q

    Specimen

    • Il sito come specimen di una fonderia di caratteri, composto nel font variabile libero Roboto Flex
    • Veri cursori regolano peso, larghezza, dimensione ottica e grado; le lettere d’apertura si inclinano verso il puntatore
    • Niente canvas né WebGL: un font variabile suddiviso per sistema di scrittura, variabili CSS e assi guidati dallo scorrimento

  19. Concetto R

    Loupe

    • Una pagina stampata e quieta; una lente di vetro mostra i meccanismi sottostanti
    • Sotto la lente: nomi degli elementi, la griglia e la linea di base reali, le misure e il campo del CMS dietro ogni riga
    • Misurato dalla pagina viva in fase di esecuzione; niente canvas, niente WebGL; un pulsante mostra tutta la radiografia da tastiera

  20. Concetto S

    Toybox

    • La pagina è una scatola di blocchi: veri titoli, schede e pulsanti cadono, si impilano e si possono lanciare (matter.js)
    • Ogni pezzo ha il suo posto; Riordina lo rimette a posto, e i pezzi fermi atterrano sempre dritti e leggibili
    • Con il movimento ridotto o senza JavaScript: gli stessi blocchi, impilati in ordine; Spazio dà un calcio al pezzo con il focus

  21. Concetto T

    Droste

    • Uno zoom infinito: scorrendo si entra nella pagina, attraverso l’occhio di una lettera, fino alla sezione successiva
    • Solo tipografia — un grottesco, filetti sottili e un colore d’accento; ogni livello è una vera sezione, spostata e poi ingrandita
    • Con il movimento ridotto o senza JavaScript: gli stessi livelli come documento impilato; focus e link arrivano alla profondità giusta