En studio, flera webbplatser.
Samma företag, samma priser, lästa ur samma CMS — byggt på tjugoen olika sätt. Varje design är en fungerande sida, och varje anteckning säger vad den kostar i hastighet och tillgänglighet.
Nuvarande webbplats
Editorial
- Serverrenderad, fungerar utan JavaScript
- Startsidans JS ≈ 139 kB gzippat, ingen WebGL
- WCAG 2.1 AA, kontrollerad med axe i CI
Koncept A
Spatial studio
- En procedurell WebGL-scen som förändras med varje sektion
- three.js laddas efter första renderingen; texten väntar aldrig på den
- Minskad rörelse ger en stillbild; utan WebGL eller JS är sidan vanlig HTML
Koncept B
Terrain
- Ett graverat landskap som du flyger över när du scrollar; varje sektion är en annan landform
- Bläckåsar och höjdkurvor på papper, ritade i en enda shader; pekaren lyfter marken
- Innehållet ligger på heltäckande pappersplattor, så texten hamnar aldrig på linjerna
Koncept C
Facet
- Ett kallt, kristallint föremål som sätts samman av skärvor när du scrollar
- Gränssnitt som en instrumentpanel: avläsningar i monospace, text som avkodas på plats
- Ljusbrytningsliknande skuggning, helt procedurell
Koncept D
Liquid
- En flytande toning över hela skärmen som pekaren rör om i
- Varje sektion skiftar färgens stämning
- Mjuk och organisk, med stor och lugn typografi: motsatsen till C
Koncept E
Bitmap
- Ett belyst 3D-stilleben, ordnat ditrerat i två färger; sektionerna löses upp cell för cell
- Pekaren (eller ett finger på bilden) är en ficklampa; en tjänst eller ett löfte i fokus lyser upp sitt föremål
- Varje ord står på ett heltäckande pappersfönster; utan WebGL tar en CSS-ditrering över
Koncept F
Diorama
- En lågpolygonal gränd i gamla stan i skymningen; när du scrollar går du in, ett rum per sektion
- Ritad i en tredjedels upplösning med fästa hörnpunkter, affina texturer och en posteriserad palett
- Allt innehåll i heltäckande dialogrutor; utan WebGL tar en skymningssiluett i CSS över
Koncept G
Glyph
- En 3D-form ritad enbart med tecken, som skiftar per sektion: knut, femton pärlor, kedja, facetterad ring
- Skuggad genom en tonskala; vid silhuetten väljs tecknen efter konturens form
- Texten står på heltäckande paneler; utan WebGL eller JS tar en servertryckt ASCII-torus över
Koncept H
Phosphor
- Webbplatsen som ett XY-oscilloskop: en ny figur per sektion, ritad av en glödande stråle
- Gaussiska strålsegment, en avklingande ping-pong-buffert för efterglöd och ett glödpass
- Hovra över en tjänst (eller tryck på dess figur) för att ställa in oscilloskopet på dess förhållande; minskad rörelse visar ett stilla spår
Koncept I
Pool
- En vågsimulering i realtid med verklig ljusbrytning och kaustik, i WebGL
- Innehållet på heltäckande skyltar vid bassängkanten; vattnet syns bara mellan dem
- Minskad rörelse: en stillbild av solbelyst vatten, ingen simulering
Koncept J
Turing
- En Gray–Scott-simulering av reaktion–diffusion i realtid, i WebGL
- Textpanelerna är maskade ur simuleringen, så mönstret växer runt dem
- Minskad rörelse: skålen odlas när sidan laddas och visas stilla
Koncept K
Mycelium
- Ett slemsvampsnätverk av ~100k GPU-agenter som växer mellan sidans innehåll
- Varje tjänst, steg och löfte är föda; det är pekaren också, och ådrorna undviker texten
- Minskad rörelse låter nätverket växa utom synhåll och visar det stilla; utan WebGL ett ritat
Koncept L
Loom
- En vävd sida: när du scrollar vävs nya rader tyg in i en bar varp
- Varje sektion är ett eget band — tuskaft, kypert, fiskben, panama, hundtand, satin
- En enda fragment-shader; varpen knäpps under pekaren; minskad rörelse visar det färdiga tyget
Koncept M
Copious OS
- Sektionerna är riktiga fönster: dra, stapla, minimera; en kolumn utan JS
- Ingen WebGL; en liten 2D-canvas för den ditrerade bakgrundsbilden
- Tangentbord: ikoner och docka är länkar och knappar, Esc minimerar, Alt+W växlar
Koncept N
Sheet
- Webbplatsen som ett kalkylark; tjänsterna är en riktig tabell, flikarna är länkar
- Piltangenterna flyttar markeringen; formelfältet beskriver varje cell
- Ingen canvas, ingen WebGL; staplar i cellerna ritade från publicerade priser och tidsåtgångar
Koncept O
Receipt
- Hela webbplatsen som ett enda termokvitto som matas ut ur en skrivare när du scrollar
- Bara CSS och SVG: scrolltidslinjer med en liten JS-reserv, ingen WebGL, ingen canvas
- Tjänsterna är en riktig tabell; skrivs ut på 80 mm-papper om du ber om det
Koncept P
Riso
- Ett tvåfärgat risografzine: varje uppslag landar ur passning och drar sig i passning när det scrollas in
- Rastren är ren CSS (punktgradienter och contrast()); kornet är ett enda SVG-turbulensfilter
- Brödtexten är alltid heltäckande blått bläck på papper, 7,5:1; det rosa är dekoration
Koncept Q
Specimen
- Webbplatsen som ett typgjuteriprov, satt i det fria variabla typsnittet Roboto Flex
- Riktiga reglage styr vikt, bredd, optisk storlek och grad; bokstäverna i heron lutar sig mot pekaren
- Ingen canvas och ingen WebGL: ett variabelt typsnitt uppdelat efter skriftsystem, CSS-variabler och scrollstyrda axlar
Koncept R
Loupe
- En stillsam tryckt sida; en glaslupp visar konstruktionen under ytan
- Under glaset: elementnamn, det verkliga rutnätet och baslinjen, uppmätta storlekar och CMS-fältet bakom varje rad
- Uppmätt på den levande sidan vid körning; ingen canvas, ingen WebGL; en knapp visar hela röntgenbilden via tangentbordet
Koncept S
Toybox
- Sidan är en låda med klossar: riktiga rubriker, kort och knappar faller ner, staplas och kan kastas (matter.js)
- Varje bit har sin plats; Städa lägger tillbaka den, och bitar som lagt sig hamnar alltid upprätt och läsbara
- Minskad rörelse eller ingen JavaScript: samma klossar, prydligt staplade; mellanslag knuffar till en fokuserad bit
Koncept T
Droste
- En oändlig zoom: du scrollar in i sidan, genom en bokstavs punsch in i nästa sektion
- Bara typografi — en grotesk, hårlinjer och en accentfärg; varje lager är en riktig sektion, först panorerad och sedan zoomad
- Minskad rörelse eller ingen JavaScript: samma lager som ett staplat dokument; fokus och länkar hamnar på rätt djup