Pāriet uz saturu

Copious Lab

Viena studija, vairākas vietnes.

Tas pats uzņēmums, tās pašas cenas, tā pati CMS — uzbūvēts divdesmit vienā dažādā veidā. Katrs dizains ir strādājoša lapa, un katra piezīme pasaka, ko tas maksā ātrdarbības un piekļūstamības ziņā.

Mainās tikai nosaukums; cenas un pakalpojumi paliek mūsu. Nekas netiek saglabāts.

  1. Pašreizējā vietne

    Editorial

    • Renderēta serverī, darbojas bez JavaScript
    • Sākumlapas JS ≈ 139 kB pēc gzip, bez WebGL
    • WCAG 2.1 AA, ko CI pārbauda axe

  2. Koncepts A

    Spatial studio

    • Viena procedurāla WebGL aina, kas mainās ar katru sadaļu
    • three.js ielādējas pēc pirmās attēlošanas; teksts to nekad negaida
    • Samazinātas kustības režīmā — nekustīgs kadrs; bez WebGL vai JS lapa ir vienkāršs HTML

  3. Koncepts B

    Terrain

    • Gravēta ainava, pār kuru lidojat, ritinot lapu; katra sadaļa ir cita reljefa forma
    • Tušas kores un horizontāles uz papīra, zīmētas vienā šeiderī; kursors paceļ zemi
    • Saturs uz vienlaidus papīra plāksnēm, tāpēc teksts nekad neatrodas uz līnijām

  4. Koncepts C

    Facet

    • Vēss, kristālisks objekts, kas ritinot saliekas no šķembām
    • Mēraparātu paneļa saskarne: vienplatuma rādījumi, teksts, kas atšifrējas savā vietā
    • Refrakcijai līdzīga ēnošana, pilnībā procedurāla

  5. Koncepts D

    Liquid

    • Pilnekrāna šķidrs gradients, ko kursors samaisa
    • Katra sadaļa maina krāsas noskaņu
    • Maigs un organisks, ar lielu, mierīgu burtu salikumu: C pretstats

  6. Koncepts E

    Bitmap

    • Apgaismota 3D klusā daba, ar sakārtotu dizeringu reducēta līdz divām krāsām; sadaļas izšķīst šūnu pa šūnai
    • Kursors (vai pirksts uz attēla) ir lukturis; fokusā esošs pakalpojums vai solījums izgaismo savu objektu
    • Katrs vārds atrodas uz vienlaidus papīra loga; bez WebGL to aizstāj CSS dizerings

  7. Koncepts F

    Diorama

    • Low-poly vecpilsētas ieliņa krēslā; ritinot jūs ieejat iekšā, pa vienai telpai katrai sadaļai
    • Zīmēta trešdaļas izšķirtspējā, ar piesaistītām virsotnēm, afīnām tekstūrām un posterizētu paleti
    • Viss saturs vienlaidus dialoglodziņos; bez WebGL to aizstāj CSS krēslas siluets

  8. Koncepts G

    Glyph

    • 3D forma, zīmēta tikai ar rakstzīmēm, kas mainās katrā sadaļā: mezgls, piecpadsmit pērlītes, ķēde, slīpēts gredzens
    • Ēnota ar toņu skalu; uz siluetas glifi pielāgoti kontūras formai
    • Teksts atrodas uz vienlaidus paneļiem; bez WebGL vai JS to aizstāj serverī izdrukāts ASCII tors

  9. Koncepts H

    Phosphor

    • Vietne kā XY osciloskops: katrā sadaļā jauna figūra, ko zīmē kvēlojošs stars
    • Gausa stara segmenti, dziestošs ping-pong buferis pēcspīdumam un mirdzuma pāreja
    • Novietojiet kursoru uz pakalpojuma (vai pieskarieties tā figūrai), lai noskaņotu osciloskopu uz tā attiecību; samazinātas kustības režīmā — viena nekustīga trase

  10. Koncepts I

    Pool

    • Reāllaika viļņu simulācija ar īstu refrakciju un kaustikām, WebGL
    • Saturs uz vienlaidus baseina malas zīmēm; ūdens redzams tikai starp tām
    • Samazināta kustība: viens nekustīgs saulē apspīdēta ūdens kadrs, bez simulācijas

  11. Koncepts J

    Turing

    • Reāllaika Greja–Skota reakcijas–difūzijas simulācija WebGL
    • Teksta paneļi ir izgriezti no simulācijas, tāpēc raksts aug ap tiem
    • Samazināta kustība: trauciņā raksts izaug ielādes laikā un tiek rādīts nekustīgs

  12. Koncepts K

    Mycelium

    • Gļotsēnes tīkls no ~100 tūkst. GPU aģentiem, kas aug starp lapas saturu
    • Katrs pakalpojums, solis un solījums ir barība; kursors arī, un dzīslas apiet tekstu
    • Samazinātas kustības režīmā tīkls izaug ārpus redzesloka un tiek rādīts nekustīgs; bez WebGL — zīmēts

  13. Koncepts L

    Loom

    • Austa lapa: ritinot tukšajā metienā tiek ieaustas jaunas auduma rindas
    • katra sadaļa ir sava josla — audekla, diagonālā, skujiņa, panama, gaiļa pēda, atlass
    • Viens fragmentu šeideris; metiens trīc zem kursora; samazinātas kustības režīmā redzams gatavs audums

  14. Koncepts M

    Copious OS

    • Sadaļas ir īsti logi: velciet, kārtojiet, minimizējiet; bez JS — viena kolonna
    • Bez WebGL; viens mazs 2D kanvass dizerētajam darbvirsmas fonam
    • Tastatūra: ikonas un doks ir saites un pogas, Esc minimizē, Alt+W pārslēdz logus

  15. Koncepts N

    Sheet

    • Vietne kā izklājlapa; pakalpojumi ir īsta tabula, cilnes ir saites
    • Bultiņu taustiņi pārvieto atlasi; formulu josla apraksta katru šūnu
    • Bez canvas, bez WebGL; joslas šūnās zīmētas no publicētajām cenām un ilgumiem

  16. Koncepts O

    Receipt

    • Visa vietne kā viens termoprintera kases čeks, kas ritinot izslīd no printera
    • Tikai CSS un SVG: ritināšanas laika skalas ar nelielu JS rezerves risinājumu, bez WebGL, bez canvas
    • Pakalpojumi ir īsta tabula; pēc pieprasījuma drukājas uz 80 mm papīra

  17. Koncepts P

    Riso

    • Divu krāsu risogrāfijas zīns: katrs atvērums ienāk nesavietots un ritinot sakrīt reģistrā
    • Rastri ir tīrs CSS (punktu gradienti un contrast()); graudainība ir viens SVG turbulence filtrs
    • Lasāmais teksts vienmēr ir vienlaidus zila krāsa uz papīra, 7,5:1; rozā ir tikai rotājums

  18. Koncepts Q

    Specimen

    • Vietne kā burtlietuves fonta paraugs, salikta ar brīvo mainīgo fontu Roboto Flex
    • Īsti slīdņi vada biezumu, platumu, optisko izmēru un gradāciju; virsraksta burti noliecas pret kursoru
    • Bez canvas un bez WebGL: viens mainīgais fonts, sadalīts pēc rakstībām, CSS mainīgie un ar ritināšanu vadītas asis

  19. Koncepts R

    Loupe

    • Mierīga drukāta lapa; stikla lupa parāda uzbūvi zem tās
    • Zem stikla: elementu nosaukumi, īstais režģis un bāzes līnija, izmērītie izmēri un CMS lauks aiz katras rindas
    • Mērīts no dzīvās lapas izpildes laikā; bez canvas, bez WebGL; poga ar tastatūru parāda visu caurskati

  20. Koncepts S

    Toybox

    • Lapa ir klucīšu kaste: īsti virsraksti, kartītes un pogas iekrīt, sakrājas kaudzē, un tās var mest (matter.js)
    • Katram elementam ir sava vieta; Sakopt noliek to atpakaļ, un nostājušies elementi vienmēr nonāk taisni un salasāmi
    • Samazināta kustība vai bez JavaScript: tie paši klucīši, glīti sakrauti; atstarpes taustiņš iesper fokusā esošajam elementam

  21. Koncepts T

    Droste

    • Bezgalīga tālummaiņa: ritinot jūs ieejat lapā, caur burta iekšpusi nākamajā sadaļā
    • Tikai burti — viens groteska fonts, matlīnijas un viens akcents; katrs slānis ir īsta sadaļa, vispirms pārbīdīta, tad pietuvināta
    • Samazināta kustība vai bez JavaScript: tie paši slāņi kā secīgs dokuments; fokuss un saites nonāk īstajā dziļumā