EXP-006Lab / Experiment
Depth Cards
Cartões com profundidade real usando apenas CSS: sensação espacial sem custo de renderização 3D.
Code
EXP-006
Status
Shipped
Technologies
3D Interfaces / CSS
Temas
InterfaceSpatial
Objetivo
Conseguir sensação de profundidade em interface comum sem pagar o custo de uma cena 3D, mantendo desempenho em aparelho modesto.
Abordagem
- 01Profundidade construída só com transformações CSS e perspectiva, sem canvas nem biblioteca 3D.
- 02Parallax mantido sutil e limitado, para sugerir camada em vez de imitar cena.
- 03Movimento desligado quando o sistema pede movimento reduzido.
Arquitetura
- Estrutura
- Cartão com perspectiva no contêiner e camadas em planos distintos.
- Movimento
- Transform e opacidade apenas, para manter o trabalho na GPU.
- Acessibilidade
- prefers-reduced-motion desliga parallax e mantém a hierarquia visual.
- Entrega
- Empacotado como utilitários do design system, reaproveitáveis fora do Lab.
Resultados
- Profundidade sutil comunicou hierarquia melhor do que sombra pesada.
- Rodou bem em dispositivo modesto justamente por não abrir contexto 3D.
- É o experimento que virou ferramenta: os utilitários já são usados em páginas de produção.
What is being tested
- Perspectiva e parallax com transform 3D
- Desempenho em dispositivos modestos
- Respeito a preferências de movimento reduzido
Learnings / next steps
- Profundidade sutil comunica hierarquia melhor que sombra pesada.
- Próximo passo: empacotar como utilitários do design system.