Aller au contenu

Copious Lab

Un studio, plusieurs sites.

La même entreprise, les mêmes prix, issus du même CMS — construits de vingt et une façons différentes. Chaque design est une page fonctionnelle, et chaque note indique ce qu’il coûte en vitesse et en accessibilité.

Seul le nom change ; les prix et les services restent les nôtres. Rien n’est enregistré.

  1. Site actuel

    Editorial

    • Rendu côté serveur, fonctionne sans JavaScript
    • JS de l’accueil ≈ 139 ko compressés (gzip), sans WebGL
    • WCAG 2.1 AA, vérifié par axe en CI

  2. Concept A

    Spatial studio

    • Une seule scène WebGL procédurale qui change à chaque section
    • three.js se charge après le premier affichage ; le texte ne l’attend jamais
    • Animations réduites : une image fixe ; sans WebGL ni JS, la page est du HTML simple

  3. Concept B

    Terrain

    • Un paysage gravé que l’on survole en faisant défiler ; chaque section est un relief différent
    • Crêtes et courbes de niveau à l’encre sur papier, tracées dans un seul shader ; le pointeur soulève le sol
    • Le contenu repose sur des planches de papier opaques, pour que le texte ne chevauche jamais les lignes

  4. Concept C

    Facet

    • Un objet froid et cristallin qui s’assemble à partir d’éclats au fil du défilement
    • Interface façon tableau de bord : affichages en chasse fixe, texte qui se décode en place
    • Ombrage inspiré de la réfraction, entièrement procédural

  5. Concept D

    Liquid

    • Un dégradé liquide plein écran que le pointeur remue
    • Chaque section change l’humeur de la couleur
    • Doux et organique, avec une grande typographie calme : l’opposé de C

  6. Concept E

    Bitmap

    • Une nature morte 3D éclairée, tramée en dithering ordonné sur deux encres ; les sections se dissolvent cellule par cellule
    • Le pointeur (ou un doigt sur l’image) est une lampe torche ; le service ou l’engagement qui a le focus éclaire son objet
    • Chaque mot repose sur une fenêtre de papier opaque ; sans WebGL, un tramage CSS prend le relais

  7. Concept F

    Diorama

    • Une rue de vieille ville en low poly au crépuscule ; le défilement vous fait entrer, une pièce par section
    • Rendu au tiers de la résolution, avec sommets accrochés à la grille, textures affines et palette postérisée
    • Tout le contenu dans des boîtes de dialogue opaques ; sans WebGL, un horizon crépusculaire en CSS prend le relais

  8. Concept G

    Glyph

    • Une forme 3D dessinée uniquement en caractères, qui se transforme à chaque section : nœud, quinze perles, chaîne, anneau à facettes
    • Ombrée selon une gamme de tons ; sur la silhouette, les glyphes épousent la forme du contour
    • Le texte repose sur des panneaux opaques ; sans WebGL ni JS, un tore ASCII généré par le serveur prend le relais

  9. Concept H

    Phosphor

    • Le site comme oscilloscope XY : une nouvelle figure par section, tracée par un faisceau lumineux
    • Segments de faisceau gaussiens, tampon ping-pong à décroissance pour la rémanence, et une passe de lueur
    • Survolez un service (ou touchez sa figure) pour accorder l’oscilloscope sur son rapport ; avec les animations réduites, une seule trace reste fixe

  10. Concept I

    Pool

    • Une simulation de vagues en temps réel, avec réfraction et caustiques réelles, en WebGL
    • Le contenu sur des panneaux opaques au bord du bassin ; l’eau n’apparaît qu’entre eux
    • Animations réduites : une seule image fixe d’eau ensoleillée, sans simulation

  11. Concept J

    Turing

    • Une simulation de réaction-diffusion de Gray–Scott en temps réel, en WebGL
    • Les panneaux de texte sont masqués de la simulation, si bien que le motif pousse autour d’eux
    • Animations réduites : la culture pousse au chargement et s’affiche figée

  12. Concept K

    Mycelium

    • Un réseau de myxomycète de ~100k agents GPU qui pousse entre les contenus de la page
    • Chaque service, étape et engagement est une source de nourriture ; le pointeur aussi, et les veines évitent le texte
    • Animations réduites : le réseau pousse hors de vue puis s’affiche figé ; sans WebGL, un réseau dessiné

  13. Concept L

    Loom

    • Une page tissée : le défilement tisse de nouveaux rangs d’étoffe dans une chaîne nue
    • Chaque section est une bande à part — toile, sergé, chevron, natté, pied-de-poule, satin
    • Un seul fragment shader ; la chaîne vibre sous le pointeur ; avec les animations réduites, l’étoffe s’affiche terminée

  14. Concept M

    Copious OS

    • Les sections sont de vraies fenêtres : déplacer, empiler, réduire ; une colonne sans JS
    • Pas de WebGL ; un seul petit canvas 2D pour le fond d’écran tramé
    • Clavier : icônes et dock sont des liens et des boutons, Échap réduit, Alt+W passe d’une fenêtre à l’autre

  15. Concept N

    Sheet

    • Le site comme tableur ; les services forment un vrai tableau, les onglets sont des liens
    • Les flèches déplacent la sélection ; la barre de formule décrit chaque cellule
    • Ni canvas ni WebGL ; des barres dans les cellules, tirées des prix et des durées publiés

  16. Concept O

    Receipt

    • Tout le site sur un seul ticket de caisse thermique, qui sort d’une imprimante au fil du défilement
    • Uniquement CSS et SVG : scroll timelines avec un petit repli en JS, ni WebGL ni canvas
    • Les services forment un vrai tableau ; s’imprime sur papier de 80 mm si vous le demandez

  17. Concept P

    Riso

    • Un fanzine en risographie deux encres : chaque double page arrive décalée et se recale en entrant à l’écran
    • Les trames sont en pur CSS (dégradés de points et contrast()) ; le grain est un unique filtre de turbulence SVG
    • Le texte de lecture est toujours en encre bleue pleine sur papier, 7,5:1 ; le rose est décoratif

  18. Concept Q

    Specimen

    • Le site comme spécimen de fonderie typographique, composé dans la police variable libre Roboto Flex
    • De vrais curseurs pilotent graisse, chasse, taille optique et grade ; les lettres de l’en-tête se penchent vers le pointeur
    • Ni canvas ni WebGL : une police variable découpée par écriture, des variables CSS et des axes pilotés par le défilement

  19. Concept R

    Loupe

    • Une page imprimée sobre ; une loupe de verre révèle les coulisses
    • Sous le verre : noms des éléments, grille et ligne de base réelles, tailles mesurées et le champ du CMS derrière chaque ligne
    • Mesuré sur la page en direct à l’exécution ; ni canvas ni WebGL ; un bouton affiche toute la radiographie au clavier

  20. Concept S

    Toybox

    • La page est une boîte de blocs : de vrais titres, cartes et boutons y tombent, s’empilent et peuvent être lancés (matter.js)
    • Chaque pièce a sa place ; Ranger la remet en place, et les pièces au repos retombent toujours à l’endroit, lisibles
    • Animations réduites ou sans JavaScript : les mêmes blocs, bien empilés ; Espace donne un coup à la pièce qui a le focus

  21. Concept T

    Droste

    • Un zoom infini : vous défilez dans la page, à travers le contrepoinçon d’une lettre, jusqu’à la section suivante
    • Uniquement de la typographie — une linéale, des filets fins et une couleur d’accent ; chaque couche est une vraie section, panoramiquée puis zoomée
    • Animations réduites ou sans JavaScript : les mêmes couches, empilées en document ; le focus et les liens arrivent à la bonne profondeur