Siirry sisältöön

Copious Lab

Yksi studio, monta sivustoa.

Sama yritys, samat hinnat, luettuna samasta CMS:stä — rakennettuna kahdellakymmenelläyhdellä eri tavalla. Jokainen ulkoasu on toimiva sivu, ja jokainen huomio kertoo, mitä se maksaa nopeudessa ja saavutettavuudessa.

Vain nimi vaihtuu; hinnat ja palvelut pysyvät meidän. Mitään ei tallenneta.

  1. Nykyinen sivusto

    Editorial

    • Palvelimella renderöity, toimii ilman JavaScriptiä
    • Etusivun JS ≈ 139 kB gzip-pakattuna, ei WebGL:ää
    • WCAG 2.1 AA, tarkistettu axella CI:ssä

  2. Konsepti A

    Spatial studio

    • Yksi proseduraalinen WebGL-näkymä, joka muuttuu osio osiolta
    • three.js latautuu ensimmäisen piirron jälkeen; teksti ei koskaan odota sitä
    • Vähennetty liike näyttää pysäytyskuvan; ilman WebGL:ää tai JS:ää sivu on pelkkää HTML:ää

  3. Konsepti B

    Terrain

    • Kaiverrettu maisema, jonka yli lennät vierittäessäsi; jokainen osio on eri pinnanmuoto
    • Mustetta olevia harjanteita ja korkeuskäyriä paperilla, piirretty yhdellä shaderilla; osoitin kohottaa maata
    • Sisältö umpinaisilla paperilaatoilla, jotta teksti ei koskaan ole viivojen päällä

  4. Konsepti C

    Facet

    • Kylmä, kiteinen esine, joka kokoaa itsensä sirpaleista vierittäessäsi
    • Mittaristomainen käyttöliittymä: tasalevyiset lukemat, teksti, joka purkautuu paikalleen
    • Valon taittumista jäljittelevä varjostus, kokonaan proseduraalinen

  5. Konsepti D

    Liquid

    • Koko näytön nestemäinen liukuväri, jota osoitin hämmentää
    • Jokainen osio muuttaa värin tunnelmaa
    • Pehmeä ja orgaaninen, suurella ja rauhallisella typografialla: C:n vastakohta

  6. Konsepti E

    Bitmap

    • Valaistu 3D-asetelma, järjestetysti ditteröity kahdelle värille; osiot liukenevat solu kerrallaan
    • Osoitin (tai sormi kuvan päällä) on taskulamppu; kohdistettu palvelu tai lupaus valaisee esineensä
    • Jokainen sana on umpinaisessa paperi-ikkunassa; ilman WebGL:ää tilalla on CSS-ditteröinti

  7. Konsepti F

    Diorama

    • Low poly -vanhankaupungin katu hämärässä; vierittäminen vie sisälle, yksi huone osiota kohden
    • Piirretty kolmasosaresoluutiolla, kärkipisteet ruudukkoon napsautettuina, affiinit tekstuurit ja posterisoitu paletti
    • Kaikki sisältö umpinaisissa valintaikkunoissa; ilman WebGL:ää tilalla on CSS-siluetti hämärässä

  8. Konsepti G

    Glyph

    • Pelkistä merkeistä piirretty 3D-muoto, joka muuttuu osioittain: solmu, viisitoista helmeä, ketju, fasetoitu rengas
    • Varjostettu sävyasteikolla; ääriviivalla merkit valitaan muodon mukaan
    • Teksti on umpinaisilla paneeleilla; ilman WebGL:ää tai JS:ää tilalla on palvelimen tulostama ASCII-torus

  9. Konsepti H

    Phosphor

    • Sivusto XY-oskilloskooppina: jokaisessa osiossa uusi kuvio, jonka hehkuva säde piirtää
    • Gaussiset sädesegmentit, hiipuva ping-pong-puskuri jälkihehkua varten ja hehkuvaihe
    • Vie osoitin palvelun päälle (tai napauta sen kuviota), niin oskilloskooppi virittyy sen suhteeseen; vähennetty liike pitää yhden pysähtyneen jäljen

  10. Konsepti I

    Pool

    • Reaaliaikainen aaltosimulaatio, jossa on aito valon taittuminen ja kaustiikka, WebGL:llä
    • Sisältö umpinaisilla altaanreunan kylteillä; vesi näkyy vain niiden välissä
    • Vähennetty liike: yksi pysäytyskuva auringon valaisemasta vedestä, ei simulaatiota

  11. Konsepti J

    Turing

    • Reaaliaikainen Gray–Scott-reaktio–diffuusiosimulaatio WebGL:llä
    • Tekstipaneelit on rajattu simulaation ulkopuolelle, joten kuvio kasvaa niiden ympärille
    • Vähennetty liike: malja kasvatetaan latauksen aikana ja näytetään pysäytettynä

  12. Konsepti K

    Mycelium

    • Limasieniverkosto, jossa on ~100k GPU-agenttia ja joka kasvaa sivun sisällön väleihin
    • Jokainen palvelu, vaihe ja lupaus on ravintoa; niin on osoitinkin, ja suonet väistävät tekstiä
    • Vähennetty liike kasvattaa verkoston näkymättömissä ja näyttää sen paikallaan; ilman WebGL:ää piirretty versio

  13. Konsepti L

    Loom

    • Kudottu sivu: vierittäminen kutoo uusia kangasrivejä paljaaseen loimeen
    • Jokainen osio on oma raitansa — palttina, toimikas, kalanruoto, panama, kukonaskel, satiini
    • Yksi fragment-shader; loimi värähtää osoittimen alla; vähennetty liike näyttää valmiin kankaan

  14. Konsepti M

    Copious OS

    • Osiot ovat oikeita ikkunoita: vedä, pinoa, pienennä; ilman JS:ää yksi palsta
    • Ei WebGL:ää; yksi pieni 2D-canvas ditteröidylle taustakuvalle
    • Näppäimistö: kuvakkeet ja telakka ovat linkkejä ja painikkeita, Esc pienentää, Alt+W vaihtaa ikkunaa

  15. Konsepti N

    Sheet

    • Sivusto laskentataulukkona; palvelut ovat oikea taulukko, välilehdet ovat linkkejä
    • Nuolinäppäimet siirtävät valintaa; kaavarivi kuvailee jokaisen solun
    • Ei canvasia, ei WebGL:ää; solujen palkit piirretään julkaistuista hinnoista ja kestoista

  16. Konsepti O

    Receipt

    • Koko sivusto yhtenä lämpöpaperikuittina, joka tulee tulostimesta vierittäessäsi
    • Vain CSS ja SVG: vieritysaikajanat pienellä JS-varamenetelmällä, ei WebGL:ää, ei canvasia
    • Palvelut ovat oikea taulukko; tulostuu pyydettäessä 80 mm:n paperille

  17. Konsepti P

    Riso

    • Kaksivärinen risografiazine: jokainen aukeama saapuu kohdistuksesta siirtyneenä ja loksahtaa kohdalleen vierittäessä
    • Rasterit ovat puhdasta CSS:ää (pistegradientit ja contrast()); rakeisuus on yksi SVG-turbulenssisuodin
    • Leipäteksti on aina umpinaista sinistä mustetta paperilla, 7,5:1; pinkki on koristetta

  18. Konsepti Q

    Specimen

    • Sivusto kirjasinvalimon näytevihkona, ladottuna vapaalla muuttuvalla Roboto Flex -fontilla
    • Oikeat liukusäätimet ohjaavat lihavuutta, leveyttä, optista kokoa ja tummuutta; pääkuvan kirjaimet kallistuvat osoitinta kohti
    • Ei canvasia eikä WebGL:ää: yksi muuttuva fontti kirjoitusjärjestelmittäin jaettuna, CSS-muuttujat ja vierityksen ohjaamat akselit

  19. Konsepti R

    Loupe

    • Hillitty painettu sivu; lasinen luuppi näyttää rakenteen pinnan alla
    • Lasin alla: elementtien nimet, todellinen ruudukko ja peruslinja, mitatut koot ja jokaisen rivin taustalla oleva CMS-kenttä
    • Mitattu elävältä sivulta ajon aikana; ei canvasia, ei WebGL:ää; painike näyttää koko röntgenkuvan näppäimistöllä

  20. Konsepti S

    Toybox

    • Sivu on palikkalaatikko: oikeat otsikot, kortit ja painikkeet putoavat sisään, pinoutuvat ja niitä voi heittää (matter.js)
    • Jokaisella palalla on paikkansa; Siivoa palauttaa sen, ja asettuneet palat päätyvät aina pystyyn ja luettaviksi
    • Vähennetty liike tai ei JavaScriptiä: samat palikat siististi pinottuina; välilyönti potkaisee kohdistettua palaa

  21. Konsepti T

    Droste

    • Loputon zoomaus: vierität sivun sisään, kirjaimen sisäkuvion läpi seuraavaan osioon
    • Pelkkää typografiaa — yksi groteski, hiusviivat ja yksi korostusväri; jokainen kerros on oikea osio, ensin panoroitu ja sitten zoomattu
    • Vähennetty liike tai ei JavaScriptiä: samat kerrokset päällekkäin pinottuna dokumenttina; kohdistus ja linkit osuvat oikeaan syvyyteen