Um estúdio de software precisa provar no próprio site o que vende.
A glifo/dev reúne design, produto e engenharia. O site tinha de ter uma assinatura visual que ninguém confundisse, sem cobrar isso em peso, travamento ou acessibilidade, e falar com clientes do Brasil e de fora.
- Assinatura em dither
Imagens e palavras desenhadas por shaders de dither em tempo real: a marca se reconhece pela textura.
- Rápido antes de bonito
O topo é uma imagem estática leve; o efeito em tempo real só carrega abaixo da dobra, quando aparece.
- Para qualquer pessoa
Três idiomas, navegação por teclado, movimento reduzido respeitado e conteúdo visível mesmo sem JavaScript.
As telas, como foram construídas.
Capturas e gravações do produto rodando, sem montagem.
Como o sistema se organiza.
Camadas da aplicação e a estrutura real do repositório.
- PáginasAstro 5 · HTML estático por padrão
- IlhasReact 19 só nos shaders, hidratados quando visíveis
- VisualPaper Shaders (dither) · Tailwind 4 com tokens no @theme
- MovimentoLenis e Motion · respeita movimento reduzido
- EntregaCloudflare Pages · headers de segurança · sem rastreadores
glifodev-site/ ├─ src/pages/ ........... rotas estáticas ├─ src/components/ ...... shell e seções ├─ src/data/ ............ navegação e conteúdo tipados ├─ src/i18n/ ............ pt · en · es ├─ src/styles/global.css tokens no @theme ├─ public/_headers ...... segurança e cache ├─ tests/ ............... smoke · a11y · visual └─ lighthouserc.json .... metas de desempenho
Decisões que sustentam o produto.
- 01
Shader só quando aparece
As ilhas React com os shaders só hidratam quando entram na tela; o resto da página é HTML puro.
- 02
Topo leve e responsivo
A abertura usa imagens WebP em três tamanhos; a arte original fica fora do build publicado.
- 03
Funciona sem efeitos
Sem JavaScript, com falha de imagem ou com movimento reduzido, o conteúdo continua visível e legível.
- 04
Metas travadas no build
Desempenho 90+, acessibilidade 100, LCP até 2,5 s, CLS até 0,1 e peso total até 1,8 MB: abaixo disso, a publicação não passa.
- 05
Privacidade por padrão
Sem analytics, cookies de marketing ou rastreadores; fontes servidas pelo próprio site.
O que foi entregue.
Um site com assinatura visual forte que passa por testes de acessibilidade, desempenho e regressão visual antes de cada publicação.
- 3idiomas: português, inglês e espanhol
- 100meta de acessibilidade no Lighthouse
- 1,8 MBpeso máximo da página
- 0rastreadores de visitante
- Direção de arte digital
- Design system em tokens
- Desenvolvimento
- Testes de acessibilidade e regressão visual
- Publicação estática
- Documentação do projeto
métricas de uso a incluir quando medidas em produção