Naar de inhoud

Copious Lab

Eén studio, meerdere sites.

Hetzelfde bedrijf, dezelfde prijzen, uit hetzelfde CMS — op eenentwintig manieren gebouwd. Elk ontwerp is een werkende pagina, en bij elk staat wat het kost aan snelheid en toegankelijkheid.

Alleen de naam verandert; de prijzen en diensten blijven de onze. Er wordt niets opgeslagen.

  1. Huidige site

    Editorial

    • Op de server gerenderd, werkt zonder JavaScript
    • JS op de homepage ≈ 139 kB gzipped, geen WebGL
    • WCAG 2.1 AA, gecontroleerd met axe in de CI

  2. Concept A

    Spatial studio

    • Eén procedurele WebGL-scène die per sectie verandert
    • three.js laadt na de eerste weergave; de tekst wacht er nooit op
    • Bij beperkte beweging een stilstaand beeld; zonder WebGL of JS is de pagina gewone HTML

  3. Concept B

    Terrain

    • Een gegraveerd landschap waar u overheen vliegt terwijl u scrolt; elke sectie is een andere landvorm
    • Inktgraten en hoogtelijnen op papier, getekend in één shader; de aanwijzer tilt de grond op
    • Inhoud op effen papieren platen, zodat de tekst nooit op de lijnen staat

  4. Concept C

    Facet

    • Een koud, kristallijn object dat zich tijdens het scrollen uit scherven opbouwt
    • Een interface als een instrumentenpaneel: monospace-uitlezingen, tekst die zich op zijn plek ontcijfert
    • Schaduwwerking in de stijl van breking, volledig procedureel

  5. Concept D

    Liquid

    • Een vloeibaar kleurverloop over het hele scherm, dat de aanwijzer omroert
    • Elke sectie verschuift de stemming van de kleur
    • Zacht en organisch, met grote, rustige letters: het tegenovergestelde van C

  6. Concept E

    Bitmap

    • Een belicht 3D-stilleven, met ordered dithering in twee inkten; secties lossen cel voor cel op
    • De aanwijzer (of een vinger op het beeld) is een zaklamp; een dienst of belofte met focus belicht haar object
    • Elk woord staat in een effen papieren venster; zonder WebGL neemt een CSS-dither het over

  7. Concept F

    Diorama

    • Een low-poly straat in de oude stad bij schemering; scrollend loopt u naar binnen, één kamer per sectie
    • Getekend op een derde van de resolutie, met verspringende hoekpunten, affiene texturen en een gereduceerd palet
    • Alle inhoud in effen dialoogvensters; zonder WebGL neemt een CSS-skyline bij schemering het over

  8. Concept G

    Glyph

    • Een 3D-vorm, alleen uit tekens getekend, die per sectie verandert: knoop, vijftien kralen, ketting, gefacetteerde ring
    • Gearceerd via een toonladder; aan het silhouet passen de tekens bij de vorm van de contour
    • Tekst staat op effen panelen; zonder WebGL of JS neemt een op de server geprinte ASCII-torus het over

  9. Concept H

    Phosphor

    • De site als XY-oscilloscoop: per sectie een nieuwe figuur, getrokken door een gloeiende straal
    • Gaussische straalsegmenten, een uitdovende ping-pongbuffer voor nagloeien, en een gloeipass
    • Wijs een dienst aan (of tik op zijn figuur) om de scoop op zijn verhouding af te stemmen; bij beperkte beweging blijft één spoor stilstaan

  10. Concept I

    Pool

    • Een live golfsimulatie met echte breking en caustics, in WebGL
    • Inhoud op effen bordjes langs het bad; het water is alleen ertussen te zien
    • Bij beperkte beweging: één stilstaand beeld van zonnig water, geen simulatie

  11. Concept J

    Turing

    • Een live Gray–Scott-reactie-diffusiesimulatie in WebGL
    • Tekstpanelen zijn uit de simulatie gemaskeerd, zodat het patroon eromheen groeit
    • Bij beperkte beweging: de schaal wordt bij het laden gekweekt en stilstaand getoond

  12. Concept K

    Mycelium

    • Een slijmzwamnetwerk van ~100k GPU-agents dat tussen de inhoud van de pagina groeit
    • Elke dienst, stap en belofte is voedsel; de aanwijzer ook, en de aders mijden de tekst
    • Bij beperkte beweging groeit het netwerk buiten beeld en staat het stil; zonder WebGL een getekend netwerk

  13. Concept L

    Loom

    • Een geweven pagina: scrollen weeft nieuwe rijen stof in een kale schering
    • Elke sectie is een eigen band — linnen, keper, visgraat, panama, pied-de-poule, satijn
    • Eén fragment shader; de schering trilt onder de aanwijzer; bij beperkte beweging ziet u de afgewerkte stof

  14. Concept M

    Copious OS

    • Secties zijn echte vensters: slepen, stapelen, minimaliseren; zonder JS één kolom
    • Geen WebGL; één klein 2D-canvas voor de geditherde achtergrond
    • Toetsenbord: pictogrammen en dock zijn links en knoppen, Esc minimaliseert, Alt+W wisselt

  15. Concept N

    Sheet

    • De site als spreadsheet; diensten zijn een echte tabel, tabbladen zijn links
    • Pijltjestoetsen verplaatsen de selectie; de formulebalk beschrijft elke cel
    • Geen canvas, geen WebGL; balken in de cellen op basis van gepubliceerde prijzen en doorlooptijden

  16. Concept O

    Receipt

    • De hele site als één thermisch kassabonnetje, dat uit een printer rolt terwijl u scrolt
    • Alleen CSS en SVG: scroll-timelines met een kleine JS-fallback, geen WebGL, geen canvas
    • Diensten zijn een echte tabel; print op papier van 80 mm als u daarom vraagt

  17. Concept P

    Riso

    • Een risografie-zine in twee inkten: elke spread komt uit het register binnen en valt in register terwijl hij in beeld scrolt
    • Rasters zijn pure CSS (stippenverlopen en contrast()); de korrel is één SVG-turbulentiefilter
    • Leestekst is altijd effen blauwe inkt op papier, 7,5:1; het roze is decoratie

  18. Concept Q

    Specimen

    • De site als letterproef van een lettergieterij, gezet in de vrije variabele letter Roboto Flex
    • Echte schuifregelaars sturen gewicht, breedte, optische grootte en grade; de letters in de intro buigen naar de aanwijzer
    • Geen canvas en geen WebGL: één variabel lettertype, gesplitst per schrift, CSS-variabelen en scrollgestuurde assen

  19. Concept R

    Loupe

    • Een rustige gedrukte pagina; een glazen loep toont wat eronder zit
    • Onder het glas: elementnamen, het echte raster en de basislijn, gemeten maten en het CMS-veld achter elke regel
    • Tijdens het laden gemeten op de live pagina; geen canvas, geen WebGL; een knop toont de hele röntgenfoto via het toetsenbord

  20. Concept S

    Toybox

    • De pagina is een doos blokken: echte koppen, kaarten en knoppen vallen erin, stapelen zich op en zijn te gooien (matter.js)
    • Elk stuk heeft een vaste plek; Opruimen zet het terug, en stukken die tot rust komen, liggen altijd rechtop en leesbaar
    • Bij beperkte beweging of zonder JavaScript: dezelfde blokken, netjes gestapeld; Spatie geeft een stuk met focus een duw

  21. Concept T

    Droste

    • Een oneindige zoom: u scrolt de pagina in, door de binnenruimte van een letter naar de volgende sectie
    • Alleen typografie — één grotesk, haarlijnen en één accent; elke laag is een echte sectie, eerst gepand en dan ingezoomd
    • Bij beperkte beweging of zonder JavaScript: dezelfde lagen als een gestapeld document; focus en links komen op de juiste diepte uit