Saltar para o conteúdo

Copious Lab

Um estúdio, vários sites.

O mesmo negócio, os mesmos preços, lidos do mesmo CMS — construído de vinte e uma formas diferentes. Cada design é uma página funcional, e cada nota diz quanto custa em velocidade e acessibilidade.

Só o nome muda; os preços e os serviços continuam a ser os nossos. Nada é guardado.

  1. Site atual

    Editorial

    • Renderizado no servidor, funciona sem JavaScript
    • JS da página inicial ≈ 139 kB com gzip, sem WebGL
    • WCAG 2.1 AA, verificado pelo axe em CI

  2. Conceito A

    Spatial studio

    • Uma única cena WebGL procedimental que muda a cada secção
    • O three.js carrega depois da primeira pintura; o texto nunca espera por ele
    • Com movimento reduzido vê-se uma imagem fixa; sem WebGL nem JS, a página é HTML simples

  3. Conceito B

    Terrain

    • Uma paisagem gravada que se sobrevoa ao percorrer a página; cada secção é um relevo diferente
    • Cumeadas e curvas de nível a tinta sobre papel, desenhadas num só shader; o ponteiro levanta o terreno
    • O conteúdo assenta em pranchas de papel opacas, para que o texto nunca fique sobre as linhas

  4. Conceito C

    Facet

    • Um objeto frio e cristalino que se monta a partir de estilhaços à medida que se percorre a página
    • Interface de painel de instrumentos: leituras em monoespaçada, texto que se descodifica até ao lugar
    • Sombreamento ao estilo de refração, todo procedimental

  5. Conceito D

    Liquid

    • Um gradiente líquido em ecrã inteiro que o ponteiro mexe
    • Cada secção muda o estado de espírito da cor
    • Suave e orgânico, com tipografia grande e serena: o oposto de C

  6. Conceito E

    Bitmap

    • Uma natureza-morta 3D iluminada, com dithering ordenado a duas tintas; as secções dissolvem-se célula a célula
    • O ponteiro (ou um dedo sobre a imagem) é uma lanterna; o serviço ou compromisso em foco ilumina o seu objeto
    • Cada palavra assenta numa janela de papel opaca; sem WebGL, entra um dithering em CSS

  7. Conceito F

    Diorama

    • Uma rua low-poly de centro histórico ao anoitecer; ao percorrer a página entra-se nela, uma sala por secção
    • Desenhado a um terço da resolução, com vértices ajustados, texturas afins e uma paleta posterizada
    • Todo o conteúdo em caixas de diálogo opacas; sem WebGL, entra um horizonte ao crepúsculo em CSS

  8. Conceito G

    Glyph

    • Uma forma 3D desenhada só com caracteres, que se transforma a cada secção: nó, quinze contas, corrente, anel facetado
    • Sombreada por uma escala tonal; na silhueta, os glifos acompanham a forma do contorno
    • O texto assenta em painéis opacos; sem WebGL nem JS, entra um toro ASCII impresso no servidor

  9. Conceito H

    Phosphor

    • O site como um osciloscópio XY: uma figura nova por secção, traçada por um feixe luminoso
    • Segmentos de feixe gaussianos, um buffer ping-pong que se desvanece para a persistência e uma passagem de brilho
    • Passe o ponteiro por um serviço (ou toque na sua figura) para sintonizar o osciloscópio na sua razão; com movimento reduzido fica um traço fixo

  10. Conceito I

    Pool

    • Uma simulação de ondas em tempo real com refração e cáusticas verdadeiras, em WebGL
    • O conteúdo assenta em placas opacas à beira da piscina; a água só se vê entre elas
    • Com movimento reduzido: uma imagem fixa de água ao sol, sem simulação

  11. Conceito J

    Turing

    • Uma simulação de reação-difusão de Gray–Scott em tempo real, em WebGL
    • Os painéis de texto ficam fora da simulação, por isso o padrão cresce à volta deles
    • Com movimento reduzido: a placa cresce ao carregar e é mostrada parada

  12. Conceito K

    Mycelium

    • Uma rede de bolor limoso de ~100 000 agentes na GPU que cresce entre o conteúdo da página
    • Cada serviço, etapa e compromisso é alimento; o ponteiro também, e os veios evitam o texto
    • Com movimento reduzido, a rede cresce fora de vista e é mostrada parada; sem WebGL, uma desenhada

  13. Conceito L

    Loom

    • Uma página tecida: ao percorrê-la, tecem-se novas passagens de pano numa teia nua
    • Cada secção é a sua própria faixa — tafetá, sarja, espinha de peixe, panamá, pé-de-galo, cetim
    • Um só fragment shader; a teia vibra sob o ponteiro; com movimento reduzido vê-se o pano acabado

  14. Conceito M

    Copious OS

    • As secções são janelas verdadeiras: arrastar, empilhar, minimizar; uma coluna sem JS
    • Sem WebGL; um pequeno canvas 2D para o fundo com dithering
    • Teclado: ícones e dock são ligações e botões, Esc minimiza, Alt+W alterna

  15. Conceito N

    Sheet

    • O site como folha de cálculo; os serviços são uma tabela verdadeira, os separadores são ligações
    • As setas movem a seleção; a barra de fórmulas descreve cada célula
    • Sem canvas, sem WebGL; barras nas células desenhadas a partir dos preços e durações publicados

  16. Conceito O

    Receipt

    • O site inteiro como um único talão térmico, que sai da impressora à medida que se percorre a página
    • Só CSS e SVG: animações ligadas ao scroll com um pequeno recurso em JS, sem WebGL, sem canvas
    • Os serviços são uma tabela verdadeira; imprime em papel de 80 mm, se o pedir

  17. Conceito P

    Riso

    • Um fanzine em risografia a duas tintas: cada página dupla chega fora de registo e acerta o registo ao entrar
    • As meias-tintas são CSS puro (gradientes de pontos e contrast()); o grão é um único filtro SVG de turbulência
    • O texto de leitura é sempre tinta azul opaca sobre papel, 7,5:1; o rosa é decoração

  18. Conceito Q

    Specimen

    • O site como espécime de uma fundição tipográfica, composto na fonte variável livre Roboto Flex
    • Cursores verdadeiros controlam peso, largura, tamanho ótico e grau; as letras de abertura inclinam-se para o ponteiro
    • Sem canvas nem WebGL: uma fonte variável dividida por sistema de escrita, variáveis CSS e eixos guiados pelo scroll

  19. Conceito R

    Loupe

    • Uma página impressa e tranquila; uma lupa de vidro mostra o mecanismo por baixo
    • Sob o vidro: nomes dos elementos, a grelha e a linha de base reais, medidas e o campo do CMS por trás de cada linha
    • Medido na página viva em tempo de execução; sem canvas, sem WebGL; um botão mostra toda a radiografia por teclado

  20. Conceito S

    Toybox

    • A página é uma caixa de blocos: títulos, cartões e botões verdadeiros caem, empilham-se e podem ser atirados (matter.js)
    • Cada peça tem o seu lugar; Arrumar põe-na de volta, e as peças paradas ficam sempre direitas e legíveis
    • Com movimento reduzido ou sem JavaScript: os mesmos blocos, bem empilhados; Espaço dá um pontapé na peça em foco

  21. Conceito T

    Droste

    • Um zoom infinito: ao percorrer a página entra-se nela, pelo olho de uma letra, até à secção seguinte
    • Só tipografia — uma grotesca, filetes finos e uma cor de destaque; cada camada é uma secção verdadeira, deslocada e depois ampliada
    • Com movimento reduzido ou sem JavaScript: as mesmas camadas como um documento empilhado; o foco e as ligações chegam à profundidade certa