Przejdź do treści

Copious Lab

Jedno studio, wiele stron.

Ta sama firma, te same ceny, ten sam CMS — zbudowane na dwadzieścia jeden sposobów. Każdy projekt to działająca strona, a każda notka mówi, ile kosztuje on w szybkości i dostępności.

Zmienia się tylko nazwa; ceny i usługi pozostają nasze. Nic nie jest zapisywane.

  1. Obecna strona

    Editorial

    • Renderowana na serwerze, działa bez JavaScriptu
    • JS strony głównej ≈ 139 kB po kompresji gzip, bez WebGL
    • WCAG 2.1 AA, sprawdzane przez axe w CI

  2. Koncept A

    Spatial studio

    • Jedna proceduralna scena WebGL, która zmienia się z każdą sekcją
    • three.js ładuje się po pierwszym renderowaniu; tekst nigdy na nie nie czeka
    • Przy ograniczonych animacjach — nieruchomy kadr; bez WebGL lub JS strona to zwykły HTML

  3. Koncept B

    Terrain

    • Grawerowany krajobraz, nad którym przelatuje się podczas przewijania; każda sekcja to inna forma terenu
    • Tuszowe grzbiety i poziomice na papierze, rysowane jednym shaderem; kursor unosi teren
    • Treść na jednolitych papierowych tablicach, więc tekst nigdy nie leży na liniach

  4. Koncept C

    Facet

    • Chłodny, krystaliczny obiekt, który składa się z odłamków podczas przewijania
    • Interfejs jak panel przyrządów: odczyty o stałej szerokości znaków, tekst, który dekoduje się na miejscu
    • Cieniowanie w stylu refrakcji, w całości proceduralne

  5. Koncept D

    Liquid

    • Pełnoekranowy płynny gradient, który kursor miesza
    • Każda sekcja zmienia nastrój koloru
    • Miękko i organicznie, z dużą, spokojną typografią: przeciwieństwo C

  6. Koncept E

    Bitmap

    • Oświetlona trójwymiarowa martwa natura, rastrowana ditheringiem uporządkowanym do dwóch farb; sekcje rozpływają się komórka po komórce
    • Kursor (lub palec na obrazie) to latarka; usługa lub obietnica z fokusem oświetla swój obiekt
    • Każde słowo leży na jednolitym papierowym oknie; bez WebGL zastępuje ją dithering w CSS

  7. Koncept F

    Diorama

    • Low-poly uliczka starego miasta o zmierzchu; przewijanie prowadzi do środka, jedno pomieszczenie na sekcję
    • Rysowana w jednej trzeciej rozdzielczości, z przyciąganymi wierzchołkami, afinicznymi teksturami i posteryzowaną paletą
    • Cała treść w jednolitych oknach dialogowych; bez WebGL zastępuje ją panorama zmierzchu w CSS

  8. Koncept G

    Glyph

    • Bryła 3D rysowana wyłącznie znakami, zmieniająca się z każdą sekcją: węzeł, piętnaście koralików, łańcuch, fasetowany pierścień
    • Cieniowana skalą tonalną; na konturze glify są dobierane do kształtu krawędzi
    • Tekst leży na jednolitych panelach; bez WebGL lub JS zastępuje ją torus ASCII wydrukowany przez serwer

  9. Koncept H

    Phosphor

    • Strona jako oscyloskop XY: nowa figura w każdej sekcji, kreślona świecącą wiązką
    • Gaussowskie segmenty wiązki, wygasający bufor ping-pong dla poświaty i przebieg glow
    • Najechanie na usługę (lub dotknięcie jej figury) stroi oscyloskop do jej proporcji; przy ograniczonych animacjach — jeden nieruchomy ślad

  10. Koncept I

    Pool

    • Symulacja fal na żywo, z prawdziwą refrakcją i kaustykami, w WebGL
    • Treść na jednolitych tablicach przy basenie; wodę widać tylko między nimi
    • Ograniczone animacje: jeden nieruchomy kadr wody w słońcu, bez symulacji

  11. Koncept J

    Turing

    • Symulacja reakcji–dyfuzji Graya–Scotta na żywo, w WebGL
    • Panele z tekstem są wycięte z symulacji, więc wzór rośnie wokół nich
    • Ograniczone animacje: wzór wyrasta w szalce przy wczytaniu i jest pokazywany nieruchomo

  12. Koncept K

    Mycelium

    • Sieć śluzowca z ok. 100 tys. agentów na GPU, która rośnie między treściami strony
    • Każda usługa, krok i obietnica to pokarm; kursor też, a żyłki omijają tekst
    • Przy ograniczonych animacjach sieć rośnie poza ekranem i jest pokazywana nieruchomo; bez WebGL — narysowana

  13. Koncept L

    Loom

    • Tkana strona: przewijanie wplata nowe rzędy tkaniny w gołą osnowę
    • Każda sekcja to osobny pas — płócienny, skośny, jodełka, panama, pepitka, atłas
    • Jeden fragment shader; osnowa drga pod kursorem; przy ograniczonych animacjach widać gotową tkaninę

  14. Koncept M

    Copious OS

    • Sekcje to prawdziwe okna: przeciąganie, nakładanie, minimalizacja; bez JS — jedna kolumna
    • Bez WebGL; jedno małe płótno 2D na tapetę z ditheringiem
    • Klawiatura: ikony i dok to linki i przyciski, Esc minimalizuje, Alt+W przełącza okna

  15. Koncept N

    Sheet

    • Strona jako arkusz kalkulacyjny; usługi to prawdziwa tabela, karty to linki
    • Strzałki przesuwają zaznaczenie; pasek formuły opisuje każdą komórkę
    • Bez canvas i bez WebGL; paski w komórkach rysowane z opublikowanych cen i czasów realizacji

  16. Koncept O

    Receipt

    • Cała strona jako jeden paragon z drukarki termicznej, wysuwany podczas przewijania
    • Tylko CSS i SVG: osie czasu przewijania z małym zapasowym skryptem JS, bez WebGL, bez canvas
    • Usługi to prawdziwa tabela; na życzenie drukuje się na papierze 80 mm

  17. Koncept P

    Riso

    • Dwukolorowy zin z risografu: każda rozkładówka pojawia się bez pasowania i wpasowuje się podczas przewijania
    • Rastry w czystym CSS (gradienty kropek i contrast()); ziarno to jeden filtr SVG turbulence
    • Tekst do czytania to zawsze jednolita niebieska farba na papierze, 7,5:1; róż jest ozdobą

  18. Koncept Q

    Specimen

    • Strona jako wzornik odlewni czcionek, złożona wolnym krojem zmiennym Roboto Flex
    • Prawdziwe suwaki sterują grubością, szerokością, rozmiarem optycznym i gradacją; litery w nagłówku pochylają się ku kursorowi
    • Bez canvas i bez WebGL: jeden font zmienny podzielony według pism, zmienne CSS i osie sterowane przewijaniem

  19. Koncept R

    Loupe

    • Spokojna drukowana strona; szklana lupa pokazuje konstrukcję pod spodem
    • Pod szkłem: nazwy elementów, prawdziwa siatka i linia bazowa, zmierzone rozmiary i pole CMS za każdym wierszem
    • Mierzone na żywej stronie w czasie działania; bez canvas, bez WebGL; przycisk pokazuje cały rentgen z klawiatury

  20. Koncept S

    Toybox

    • Strona to pudełko klocków: prawdziwe nagłówki, karty i przyciski spadają, układają się w stos i można nimi rzucać (matter.js)
    • Każdy element ma swoje miejsce; Posprzątaj odkłada go z powrotem, a elementy w spoczynku zawsze lądują prosto i czytelnie
    • Ograniczone animacje lub brak JavaScriptu: te same klocki, równo ułożone; spacja kopie element z fokusem

  21. Koncept T

    Droste

    • Nieskończony zoom: przewijanie prowadzi w głąb strony, przez światło litery do następnej sekcji
    • Tylko typografia — jeden grotesk, włoskowate linie i jeden akcent; każda warstwa to prawdziwa sekcja, najpierw przesunięta, potem przybliżona
    • Ograniczone animacje lub brak JavaScriptu: te same warstwy jako dokument jedna pod drugą; fokus i linki trafiają na właściwą głębokość