Zum Inhalt springen

Copious Lab

Ein Studio, mehrere Websites.

Dasselbe Unternehmen, dieselben Preise, aus demselben CMS gelesen – auf einundzwanzig verschiedene Arten gebaut. Jedes Design ist eine funktionierende Seite, und jede Notiz sagt, was es an Geschwindigkeit und Barrierefreiheit kostet.

Nur der Name ändert sich; Preise und Leistungen bleiben unsere. Nichts wird gespeichert.

  1. Aktuelle Website

    Editorial

    • Serverseitig gerendert, funktioniert ohne JavaScript
    • JS der Startseite ≈ 139 kB gzip-komprimiert, kein WebGL
    • WCAG 2.1 AA, in der CI mit axe geprüft

  2. Konzept A

    Spatial studio

    • Eine prozedurale WebGL-Szene, die sich mit jedem Abschnitt verändert
    • three.js lädt nach dem ersten Rendern; der Text wartet nie darauf
    • Reduzierte Animationen zeigen ein Standbild; ohne WebGL oder JS ist die Seite schlichtes HTML

  3. Konzept B

    Terrain

    • Eine gestochene Landschaft, die Sie beim Scrollen überfliegen; jeder Abschnitt ist eine andere Landform
    • Tuschekämme und Höhenlinien auf Papier, in einem einzigen Shader gezeichnet; der Zeiger hebt den Boden an
    • Inhalte auf deckenden Papiertafeln, damit der Text nie auf den Linien steht

  4. Konzept C

    Facet

    • Ein kühles, kristallines Objekt, das sich beim Scrollen aus Splittern zusammensetzt
    • Oberfläche wie ein Messinstrument: Monospace-Anzeigen, Text, der sich an seinen Platz entschlüsselt
    • Lichtbrechungsartige Schattierung, komplett prozedural

  5. Konzept D

    Liquid

    • Ein bildschirmfüllender flüssiger Farbverlauf, den der Zeiger umrührt
    • Jeder Abschnitt verändert die Stimmung der Farbe
    • Weich und organisch, mit großer, ruhiger Schrift: das Gegenteil von C

  6. Konzept E

    Bitmap

    • Ein beleuchtetes 3D-Stillleben, geordnet in zwei Druckfarben gedithert; Abschnitte lösen sich Zelle für Zelle auf
    • Der Zeiger (oder ein Finger auf dem Bild) ist eine Taschenlampe; eine fokussierte Leistung oder Zusage beleuchtet ihr Objekt
    • Jedes Wort steht auf einem deckenden Papierfenster; ohne WebGL springt ein CSS-Dither ein

  7. Konzept F

    Diorama

    • Eine Low-Poly-Altstadtgasse in der Abenddämmerung; beim Scrollen gehen Sie hinein, ein Raum pro Abschnitt
    • Gerendert in einem Drittel der Auflösung, mit einrastenden Eckpunkten, affinen Texturen und posterisierter Palette
    • Alle Inhalte in deckenden Dialogfenstern; ohne WebGL springt eine CSS-Skyline in der Dämmerung ein

  8. Konzept G

    Glyph

    • Eine 3D-Form, nur aus Zeichen gezeichnet, die sich pro Abschnitt verwandelt: Knoten, fünfzehn Perlen, Kette, facettierter Ring
    • Schattiert über eine Tonwertskala; an der Silhouette werden die Zeichen der Form der Kontur angepasst
    • Text steht auf deckenden Flächen; ohne WebGL oder JS springt ein vom Server gedruckter ASCII-Torus ein

  9. Konzept H

    Phosphor

    • Die Website als XY-Oszilloskop: pro Abschnitt eine neue Figur, gezeichnet von einem leuchtenden Strahl
    • Gaußsche Strahlsegmente, ein abklingender Ping-Pong-Puffer für das Nachleuchten und ein Glow-Pass
    • Fahren Sie über eine Leistung (oder tippen Sie auf ihre Figur), um das Oszilloskop auf ihr Verhältnis abzustimmen; reduzierte Animationen zeigen eine stehende Spur

  10. Konzept I

    Pool

    • Eine Live-Wellensimulation mit echter Lichtbrechung und Kaustiken, in WebGL
    • Inhalte auf deckenden Schildern am Beckenrand; das Wasser ist nur dazwischen zu sehen
    • Reduzierte Animationen: ein Standbild von sonnenbeschienenem Wasser, keine Simulation

  11. Konzept J

    Turing

    • Eine Live-Simulation der Gray–Scott-Reaktions-Diffusion in WebGL
    • Textflächen sind aus der Simulation ausgespart, sodass das Muster um sie herum wächst
    • Reduzierte Animationen: Die Schale wächst beim Laden heran und wird als Standbild gezeigt

  12. Konzept K

    Mycelium

    • Ein Schleimpilz-Netz aus ~100k GPU-Agenten, das zwischen den Inhalten der Seite wächst
    • Jede Leistung, jeder Schritt und jede Zusage ist Nahrung; der Zeiger auch, und die Adern meiden den Text
    • Reduzierte Animationen lassen das Netz unsichtbar wachsen und zeigen es still; ohne WebGL ein gezeichnetes

  13. Konzept L

    Loom

    • Eine gewebte Seite: Beim Scrollen werden neue Stoffreihen in eine leere Kette gewebt
    • Jeder Abschnitt ist ein eigenes Band – Leinwand, Köper, Fischgrat, Panama, Hahnentritt, Satin
    • Ein einziger Fragment-Shader; die Kette lässt sich unter dem Zeiger zupfen; reduzierte Animationen zeigen den fertigen Stoff

  14. Konzept M

    Copious OS

    • Abschnitte sind echte Fenster: ziehen, stapeln, minimieren; ohne JS eine Spalte
    • Kein WebGL; ein kleines 2D-Canvas für das geditherte Hintergrundbild
    • Tastatur: Symbole und Dock sind Links und Schaltflächen, Esc minimiert, Alt+W wechselt durch

  15. Konzept N

    Sheet

    • Die Website als Tabellenkalkulation; die Leistungen sind eine echte Tabelle, die Reiter sind Links
    • Pfeiltasten bewegen die Auswahl; die Formelleiste beschreibt jede Zelle
    • Kein Canvas, kein WebGL; Balken in den Zellen, gezeichnet aus veröffentlichten Preisen und Laufzeiten

  16. Konzept O

    Receipt

    • Die ganze Website als ein einziger Thermo-Kassenbon, der beim Scrollen aus einem Drucker läuft
    • Nur CSS und SVG: Scroll-Timelines mit kleinem JS-Fallback, kein WebGL, kein Canvas
    • Die Leistungen sind eine echte Tabelle; auf Wunsch wird auf 80-mm-Papier gedruckt

  17. Konzept P

    Riso

    • Ein zweifarbiges Risographie-Zine: Jede Doppelseite landet verschoben und rückt beim Hereinscrollen ins Register
    • Raster sind reines CSS (Punktverläufe und contrast()); die Körnung ist ein einziger SVG-Turbulenzfilter
    • Lesetext ist immer deckend blaue Farbe auf Papier, 7,5:1; das Pink ist Dekoration

  18. Konzept Q

    Specimen

    • Die Website als Schriftmuster einer Schriftgießerei, gesetzt in der freien variablen Schrift Roboto Flex
    • Echte Schieberegler steuern Stärke, Breite, optische Größe und Grad; die Buchstaben im Hero neigen sich zum Zeiger
    • Kein Canvas und kein WebGL: eine variable Schrift, nach Schriftsystem aufgeteilt, CSS-Variablen und scrollgesteuerte Achsen

  19. Konzept R

    Loupe

    • Eine ruhige gedruckte Seite; eine gläserne Lupe zeigt den Aufbau darunter
    • Unter dem Glas: Elementnamen, das echte Raster und die Grundlinie, gemessene Größen und das CMS-Feld hinter jeder Zeile
    • Zur Laufzeit an der echten Seite gemessen; kein Canvas, kein WebGL; eine Schaltfläche zeigt das ganze Röntgenbild per Tastatur

  20. Konzept S

    Toybox

    • Die Seite ist eine Kiste voller Bausteine: echte Überschriften, Karten und Schaltflächen fallen hinein, stapeln sich und lassen sich werfen (matter.js)
    • Jedes Teil hat seinen Platz; Aufräumen legt es zurück, und liegende Teile landen immer aufrecht und lesbar
    • Reduzierte Animationen oder kein JavaScript: dieselben Bausteine, ordentlich gestapelt; die Leertaste schubst ein fokussiertes Teil an

  21. Konzept T

    Droste

    • Ein endloser Zoom: Sie scrollen in die Seite hinein, durch die Punze eines Buchstabens in den nächsten Abschnitt
    • Nur Schrift – eine Grotesk, Haarlinien und eine Akzentfarbe; jede Ebene ist ein echter Abschnitt, erst verschoben, dann gezoomt
    • Reduzierte Animationen oder kein JavaScript: dieselben Ebenen als gestapeltes Dokument; Fokus und Links landen in der richtigen Tiefe