Liigu sisu juurde

Copious Lab

Üks stuudio, mitu saiti.

Sama ettevõte, samad hinnad samast CMS-ist — ehitatud kahekümne ühel eri moel. Iga kujundus on töötav leht ja iga märkus ütleb, mida see maksab kiiruses ja ligipääsetavuses.

Muutub ainult nimi; hinnad ja teenused jäävad meie omaks. Midagi ei salvestata.

  1. Praegune sait

    Editorial

    • Serveris renderdatud, töötab ilma JavaScriptita
    • Avalehe JS ≈ 139 kB gzipituna, ilma WebGL-ita
    • WCAG 2.1 AA, CI-s kontrollib axe

  2. Kontsept A

    Spatial studio

    • Üks protseduuriline WebGL-stseen, mis muutub iga jaotisega
    • three.js laadib pärast esimest kuvamist; tekst ei oota seda kunagi
    • Vähendatud liikumisega on kaader paigal; ilma WebGL-i või JS-ita on leht lihtne HTML

  3. Kontsept B

    Terrain

    • Graveeritud maastik, mille kohal kerimisel lendate; iga jaotis on eri pinnavorm
    • Tušijoonelised harjad ja samakõrgusjooned paberil, joonistatud ühe shaderiga; kursor tõstab maad
    • Sisu on ühtlastel paberplaatidel, nii et tekst ei satu kunagi joontele

  4. Kontsept C

    Facet

    • Külm kristalne objekt, mis kerimisel kildudest kokku pannakse
    • Mõõteriista paneeli liides: püsisammkirjas näidud, tekst, mis dekodeerub oma kohale
    • Murdumist meenutav varjutus, täielikult protseduuriline

  5. Kontsept D

    Liquid

    • Täisekraani vedel üleminek, mida kursor segab
    • Iga jaotis muudab värvi meeleolu
    • Pehme ja orgaaniline, suure rahuliku kirjaga: C täielik vastand

  6. Kontsept E

    Bitmap

    • Valgustatud 3D-vaikelu, korrastatud ditherdusega taandatud kahele värvile; jaotised hajuvad ruut ruudu haaval
    • Kursor (või sõrm pildil) on taskulamp; fookuses olev teenus või lubadus valgustab oma eset
    • Iga sõna on ühtlasel paberaknal; ilma WebGL-ita asendab seda CSS-ditherdus

  7. Kontsept F

    Diorama

    • Madala polügoonisusega vanalinna tänav hämaruses; kerimine viib teid sisse, iga jaotis on üks tuba
    • Joonistatud kolmandikulise eraldusvõimega, hüplevate tippude, afiinsete tekstuuride ja posteriseeritud paletiga
    • Kogu sisu on ühtlastes dialoogikastides; ilma WebGL-ita asendab seda CSS-is hämarik linnasiluett

  8. Kontsept G

    Glyph

    • Ainult märkidest joonistatud 3D-kuju, mis muutub jaotiseti: sõlm, viisteist helmest, kett, tahuline sõrmus
    • Varjutatud toonirea kaudu; siluetil valitakse märgid kontuuri kuju järgi
    • Tekst on ühtlastel paneelidel; ilma WebGL-i või JS-ita asendab seda serveris trükitud ASCII-toor

  9. Kontsept H

    Phosphor

    • Sait XY-ostsilloskoobina: iga jaotis on uus kujund, mille joonistab helendav kiir
    • Gaussi kiirelõigud, järelhelenduseks hääbuv ping-pong-puhver ja helenduskäik
    • Viige kursor teenusele (või puudutage selle kujundit), et häälestada skoop selle suhtele; vähendatud liikumisega jääb üks paigalseisev jälg

  10. Kontsept I

    Pool

    • Elav lainesimulatsioon päris murdumise ja kaustikaga, WebGL-is
    • Sisu on ühtlastel basseinisiltidel; vesi paistab ainult nende vahelt
    • Vähendatud liikumine: üks paigalseisev kaader päikeselisest veest, ilma simulatsioonita

  11. Kontsept J

    Turing

    • Elav Gray–Scotti reaktsiooni-difusiooni simulatsioon WebGL-is
    • Tekstipaneelid on simulatsioonist välja maskeeritud, nii et muster kasvab nende ümber
    • Vähendatud liikumine: tass kasvatatakse laadimisel valmis ja näidatakse paigal

  12. Kontsept K

    Mycelium

    • Limaseene võrgustik ~100 000 GPU-agendist, mis kasvab lehe sisu vahel
    • Iga teenus, samm ja lubadus on toit; kursor samuti, ja sooned hoiavad tekstist eemale
    • Vähendatud liikumisega kasvab võrgustik silma alt ära ja seda näidatakse paigal; ilma WebGL-ita joonistatud võrgustik

  13. Kontsept L

    Loom

    • Kootud leht: kerimine koob paljale lõimele uusi riiderida
    • Igal jaotisel on oma triip — labane, toimne, kalasaba, korvsidus, kukejalg, atlass
    • Üks fragmendishader; lõim väriseb kursori all; vähendatud liikumisega on näha valmis riie

  14. Kontsept M

    Copious OS

    • Jaotised on päris aknad: lohistage, laduge, minimeerige; ilma JS-ita üks veerg
    • WebGL-i pole; üks väike 2D-lõuend ditherdatud taustapildi jaoks
    • Klaviatuur: ikoonid ja dokk on lingid ja nupud, Esc minimeerib, Alt+W vahetab aknaid

  15. Kontsept N

    Sheet

    • Sait arvutustabelina; teenused on päris tabel, sakid on lingid
    • Nooleklahvid liigutavad valikut; valemiriba kirjeldab iga lahtrit
    • Ei lõuendit ega WebGL-i; lahtrisisesed tulbad on joonistatud avaldatud hindade ja kestuste põhjal

  16. Kontsept O

    Receipt

    • Kogu sait ühe termokassatšekina, mis tuleb kerimise ajal printerist välja
    • Ainult CSS ja SVG: kerimisajajooned väikese JS-varulahendusega, ilma WebGL-i ja lõuendita
    • Teenused on päris tabel; soovi korral prindib 80 mm paberile

  17. Kontsept P

    Riso

    • Kahevärviline risograafiazin: iga kahekülg saabub nihkes ja tõmbub kerides paika
    • Rastrid on puhas CSS (punktgradiendid ja contrast()); tera on üks SVG turbulence-filter
    • Lugemistekst on alati ühtlane sinine värv paberil, 7,5:1; roosa on kaunistus

  18. Kontsept Q

    Specimen

    • Sait kirjavalukoja kirjanäidisena, laotud vabas muutuvkirjas Roboto Flex
    • Päris liugurid juhivad jämedust, laiust, optilist suurust ja tihedust; pealkirja tähed kalduvad kursori poole
    • Ei lõuendit ega WebGL-i: üks muutuvkiri kirjasüsteemide kaupa jagatuna, CSS-muutujad ja kerimisega juhitud teljed

  19. Kontsept R

    Loupe

    • Vaikne trükitud leht; klaasist luup näitab selle all peituvat ehitust
    • Klaasi all: elementide nimed, päris ruudustik ja alusjoon, mõõdetud suurused ja iga rea taga olev CMS-i väli
    • Mõõdetakse elavalt lehelt käitusajal; ei lõuendit ega WebGL-i; nupp näitab kogu läbivalgustust klaviatuurilt

  20. Kontsept S

    Toybox

    • Leht on klotsikast: päris pealkirjad, kaardid ja nupud kukuvad sisse, lähevad virna ja neid saab visata (matter.js)
    • Igal tükil on oma koht; „Korista“ paneb selle tagasi ja paigale jäänud tükid on alati püsti ja loetavad
    • Vähendatud liikumine või JavaScript puudub: samad klotsid kenasti virnas; tühik lööb fookuses olevat tükki

  21. Kontsept T

    Droste

    • Lõputu suum: kerite lehe sisse, läbi tähe sisevormi järgmisse jaotisse
    • Ainult kiri — üks groteskkiri, juuksejooned ja üks rõhuvärv; iga kiht on päris jaotis, enne nihutatud, siis suumitud
    • Vähendatud liikumine või JavaScript puudub: samad kihid virnastatud dokumendina; fookus ja lingid jõuavad õigele sügavusele