Saltar al contenido

Copious Lab

Un estudio, varios sitios.

El mismo negocio, los mismos precios, leídos del mismo CMS — construido de veintiuna maneras distintas. Cada diseño es una página que funciona, y cada nota explica lo que cuesta en velocidad y accesibilidad.

Solo cambia el nombre; los precios y los servicios siguen siendo nuestros. No se guarda nada.

  1. Sitio actual

    Editorial

    • Renderizado en el servidor, funciona sin JavaScript
    • JS de la página de inicio ≈ 139 kB con gzip, sin WebGL
    • WCAG 2.1 AA, comprobado con axe en CI

  2. Concepto A

    Spatial studio

    • Una única escena WebGL procedural que cambia con cada sección
    • three.js se carga tras el primer pintado; el texto nunca lo espera
    • Con movimiento reducido se ve un fotograma fijo; sin WebGL ni JS, la página es HTML sencillo

  3. Concepto B

    Terrain

    • Un paisaje grabado que se sobrevuela al desplazarse; cada sección es un relieve distinto
    • Crestas y curvas de nivel en tinta sobre papel, dibujadas en un solo shader; el puntero levanta el terreno
    • El contenido va sobre láminas de papel opacas, así el texto nunca queda sobre las líneas

  4. Concepto C

    Facet

    • Un objeto frío y cristalino que se ensambla a partir de fragmentos al desplazarse
    • Interfaz de panel de instrumentos: lecturas en monoespaciada, texto que se descifra hasta encajar
    • Sombreado de tipo refracción, todo procedural

  5. Concepto D

    Liquid

    • Un degradado líquido a pantalla completa que el puntero remueve
    • Cada sección cambia el ánimo del color
    • Suave y orgánico, con tipografía grande y serena: lo opuesto a C

  6. Concepto E

    Bitmap

    • Un bodegón 3D iluminado, tramado ordenado a dos tintas; las secciones se disuelven celda a celda
    • El puntero (o un dedo sobre la imagen) es una linterna; el servicio o compromiso con el foco ilumina su objeto
    • Cada palabra va sobre una ventana de papel opaca; sin WebGL, la sustituye un tramado en CSS

  7. Concepto F

    Diorama

    • Una calle low-poly de casco antiguo al anochecer; al desplazarse entra en ella, una sala por sección
    • Dibujado a un tercio de la resolución, con vértices ajustados, texturas afines y una paleta posterizada
    • Todo el contenido en cuadros de diálogo opacos; sin WebGL, lo sustituye un horizonte crepuscular en CSS

  8. Concepto G

    Glyph

    • Una forma 3D dibujada solo con caracteres, que se transforma en cada sección: nudo, quince cuentas, cadena, anillo facetado
    • Sombreada con una escala tonal; en la silueta, los glifos se eligen según la forma del contorno
    • El texto va sobre paneles opacos; sin WebGL ni JS, lo sustituye un toro ASCII impreso en el servidor

  9. Concepto H

    Phosphor

    • El sitio como un osciloscopio XY: una figura nueva por sección, trazada por un haz luminoso
    • Segmentos de haz gaussianos, un búfer ping-pong que se desvanece para la persistencia y una pasada de resplandor
    • Pase el puntero por un servicio (o toque su figura) para sintonizar el osciloscopio a su proporción; con movimiento reducido queda un trazo fijo

  10. Concepto I

    Pool

    • Una simulación de olas en vivo con refracción y cáusticas reales, en WebGL
    • El contenido va en carteles opacos junto a la piscina; el agua solo se ve entre ellos
    • Con movimiento reducido: un fotograma fijo de agua al sol, sin simulación

  11. Concepto J

    Turing

    • Una simulación de reacción-difusión de Gray–Scott en vivo, en WebGL
    • Los paneles de texto quedan fuera de la simulación, así que el patrón crece a su alrededor
    • Con movimiento reducido: la placa crece al cargar y se muestra fija

  12. Concepto K

    Mycelium

    • Una red de moho mucilaginoso de ~100 000 agentes en la GPU que crece entre el contenido de la página
    • Cada servicio, paso y compromiso es alimento; el puntero también, y las venas esquivan el texto
    • Con movimiento reducido, la red crece fuera de la vista y se muestra fija; sin WebGL, una dibujada

  13. Concepto L

    Loom

    • Una página tejida: al desplazarse, se tejen nuevas pasadas de tela sobre una urdimbre desnuda
    • Cada sección es su propia franja — tafetán, sarga, espiga, panamá, pata de gallo, raso
    • Un solo fragment shader; la urdimbre vibra bajo el puntero; con movimiento reducido se ve la tela terminada

  14. Concepto M

    Copious OS

    • Las secciones son ventanas reales: arrastrar, apilar, minimizar; una columna sin JS
    • Sin WebGL; un pequeño canvas 2D para el fondo de escritorio tramado
    • Teclado: los iconos y el dock son enlaces y botones, Esc minimiza, Alt+W alterna

  15. Concepto N

    Sheet

    • El sitio como hoja de cálculo; los servicios son una tabla real y las pestañas, enlaces
    • Las flechas mueven la selección; la barra de fórmulas describe cada celda
    • Sin canvas ni WebGL; barras en celda trazadas a partir de precios y duraciones publicados

  16. Concepto O

    Receipt

    • Todo el sitio como un único tique de caja térmico, que sale de la impresora al desplazarse
    • Solo CSS y SVG: animaciones ligadas al desplazamiento con un pequeño respaldo en JS, sin WebGL ni canvas
    • Los servicios son una tabla real; se imprime en papel de 80 mm si se lo pide

  17. Concepto P

    Riso

    • Un fanzine en risografía a dos tintas: cada doble página llega descuadrada y se pone en registro al entrar
    • Los semitonos son CSS puro (degradados de puntos y contrast()); el grano es un único filtro SVG de turbulencia
    • El texto de lectura siempre es tinta azul opaca sobre papel, 7,5:1; el rosa es decoración

  18. Concepto Q

    Specimen

    • El sitio como muestrario de una fundición tipográfica, compuesto en la fuente variable libre Roboto Flex
    • Deslizadores reales controlan peso, anchura, tamaño óptico y grado; las letras de la portada se inclinan hacia el puntero
    • Sin canvas ni WebGL: una fuente variable dividida por escritura, variables CSS y ejes guiados por el desplazamiento

  19. Concepto R

    Loupe

    • Una página impresa y tranquila; una lupa de cristal muestra el andamiaje que hay debajo
    • Bajo el cristal: nombres de elementos, la rejilla y la línea base reales, medidas y el campo del CMS detrás de cada línea
    • Medido en la página en vivo durante la ejecución; sin canvas ni WebGL; un botón muestra toda la radiografía con el teclado

  20. Concepto S

    Toybox

    • La página es una caja de bloques: titulares, tarjetas y botones reales caen, se apilan y se pueden lanzar (matter.js)
    • Cada pieza tiene su sitio; Ordenar la devuelve, y las piezas en reposo siempre quedan derechas y legibles
    • Con movimiento reducido o sin JavaScript: los mismos bloques, bien apilados; Espacio da un golpe a la pieza con el foco

  21. Concepto T

    Droste

    • Un zoom infinito: al desplazarse entra en la página, a través del ojo de una letra, hasta la sección siguiente
    • Solo tipografía — una grotesca, filetes finos y un color de acento; cada capa es una sección real, desplazada y luego ampliada
    • Con movimiento reducido o sin JavaScript: las mismas capas como un documento apilado; el foco y los enlaces llegan a la profundidad correcta