Skip to content

Copious Lab

One studio, several sites.

The same business, the same prices, read from the same CMS — built twenty-one different ways. Each design is a working page, and each note says what it costs in speed and accessibility.

Only the name changes; the prices and services stay ours. Nothing is stored.

  1. Current site

    Editorial

    • Server-rendered, works without JavaScript
    • Home JS ≈ 139 kB gzipped, no WebGL
    • WCAG 2.1 AA, checked by axe in CI

  2. Concept A

    Spatial studio

    • One procedural WebGL scene that changes with each section
    • three.js loads after first paint; the text never waits for it
    • Reduced motion gives a still frame; without WebGL or JS the page is plain HTML

  3. Concept B

    Terrain

    • An engraved landscape you fly over as you scroll; each section is a different landform
    • Ink ridgelines and contours on paper, drawn in one shader; the pointer lifts the ground
    • Content on solid paper plates, so the text never sits on the lines

  4. Concept C

    Facet

    • A cold, crystalline object that assembles from shards as you scroll
    • Instrument-panel interface: monospace readouts, text that decodes into place
    • Refraction-style shading, all procedural

  5. Concept D

    Liquid

    • A full-screen liquid gradient the pointer stirs
    • Each section shifts the mood of the colour
    • Soft and organic, with large calm type: the opposite of C

  6. Concept E

    Bitmap

    • A lit 3D still life, ordered-dithered to two inks; sections dissolve cell by cell
    • The pointer (or a finger on the picture) is a torch; a service or promise in focus lights its object
    • Every word sits on a solid paper window; without WebGL a CSS dither stands in

  7. Concept F

    Diorama

    • A low-poly old-town street at dusk; scrolling walks you inside, one room per section
    • Drawn at a third of the resolution with snapped vertices, affine textures and a posterised palette
    • All content in solid dialog boxes; without WebGL a CSS dusk skyline stands in

  8. Concept G

    Glyph

    • A 3D form drawn only in characters, morphing per section: knot, fifteen beads, chain, faceted ring
    • Shaded through a tonal ramp; at the silhouette, glyphs are matched to the contour’s shape
    • Text sits on solid panels; without WebGL or JS a server-printed ASCII torus stands in

  9. Concept H

    Phosphor

    • The site as an XY oscilloscope: a new figure per section, traced by a glowing beam
    • Gaussian beam segments, a decaying ping-pong buffer for persistence, and a glow pass
    • Hover (or tap the figure of) a service to tune the scope to its ratio; reduced motion holds one still trace

  10. Concept I

    Pool

    • A live wave simulation with real refraction and caustics, in WebGL
    • Content on solid poolside signs; the water only shows between them
    • Reduced motion: one still frame of sunlit water, no simulation

  11. Concept J

    Turing

    • A live Gray–Scott reaction–diffusion simulation in WebGL
    • Text panels are masked out of the sim, so the pattern grows around them
    • Reduced motion: the dish is grown on load and shown still

  12. Concept K

    Mycelium

    • A slime-mould network of ~100k GPU agents that grows between the page’s content
    • Every service, step and promise is food; the pointer is too, and the veins avoid the text
    • Reduced motion grows the network out of sight and shows it still; without WebGL, a drawn one

  13. Concept L

    Loom

    • A woven page: scrolling weaves new rows of cloth into a bare warp
    • Every section is its own band — plain, twill, herringbone, basket, houndstooth, satin
    • One fragment shader; the warp plucks under the pointer; reduced motion shows the finished cloth

  14. Concept M

    Copious OS

    • Sections are real windows: drag, stack, minimise; a column without JS
    • No WebGL; one small 2D canvas for the dithered wallpaper
    • Keyboard: icons and dock are links and buttons, Esc minimises, Alt+W cycles

  15. Concept N

    Sheet

    • The site as a spreadsheet; services are a real table, tabs are links
    • Arrow keys move the selection; the formula bar describes each cell
    • No canvas, no WebGL; in-cell bars drawn from published prices and durations

  16. Concept O

    Receipt

    • The whole site as one thermal till receipt, fed out of a printer as you scroll
    • CSS and SVG only: scroll timelines with a small JS fallback, no WebGL, no canvas
    • Services are a real table; prints on 80 mm paper if you ask it to

  17. Concept P

    Riso

    • A two-ink risograph zine: each spread lands out of register and pulls into register as it scrolls in
    • Halftones are pure CSS (dot gradients and contrast()); the grain is one SVG turbulence filter
    • Reading text is always solid blue ink on paper, 7.5:1; the pink is decoration

  18. Concept Q

    Specimen

    • The site as a type-foundry specimen, set in the libre variable font Roboto Flex
    • Real sliders drive weight, width, optical size and grade; the hero letters lean toward the pointer
    • No canvas and no WebGL: one variable font split by script, CSS variables and scroll-driven axes

  19. Concept R

    Loupe

    • A quiet printed page; a glass loupe shows the working underneath
    • Under the glass: element names, the real grid and baseline, measured sizes and the CMS field behind every line
    • Measured from the live page at runtime; no canvas, no WebGL; a button shows the whole x-ray by keyboard

  20. Concept S

    Toybox

    • The page is a box of blocks: real headings, cards and buttons fall in, stack and can be thrown (matter.js)
    • Every piece has a home; Tidy up puts it back, and settled pieces always land upright and readable
    • Reduced motion or no JavaScript: the same blocks, neatly stacked; Space kicks a focused piece

  21. Concept T

    Droste

    • An infinite zoom: you scroll into the page, through the counter of a letter into the next section
    • Type only — one grotesk, hairlines and one accent; every layer is a real section, panned then zoomed
    • Reduced motion or no JavaScript: the same layers as a stacked document; focus and links land at the right depth