Três cenas construídas do zero, sem GSAP, sem Three.js, sem nenhuma biblioteca. A rolagem controla a linha do tempo. Abra cada uma e role devagar.
Profundidade 3D de verdade: a câmera orbita, as peças da frente cobrem as de trás e cada uma projeta sombra no chão. Feito com CSS 3D, sem WebGL.
CSS 3D · preserve-3d 02Entrada em cascata, revelação por cortina, faixa que corta a palavra e galeria que desliza na horizontal enquanto você rola na vertical.
máscara · rolagem presa 03Milhares de pontos amostrados do próprio desenho: eles se dispersam, flutuam em curvas próprias e se reagrupam formando outra coisa.
canvas · amostragem de pixelsO efeito que impressiona no Instagram (produto se desmontando no ar) quase sempre é sequência de imagens renderizadas em 3D: o objeto é modelado no Blender, exportado em 120 a 240 quadros, e o código só troca a imagem conforme a rolagem. O custo está na produção 3D, não na programação. Se prometer isso, o orçamento precisa incluir modelagem e render.
As três cenas aqui provam o outro caminho: chegar perto sem nenhum asset 3D e sem biblioteca. Mais barato de produzir, muito mais leve de carregar e sem dependência de terceiros.
position: sticky e você converte o quanto já rolou dentro dela num número de 0 a 1. Esse número posiciona tudo.perspective mais transform-style: preserve-3d entregam oclusão real (a peça da frente cobre a de trás) sem WebGL.prefers-reduced-motion (tem gente que passa mal com movimento) e garanta que o conteúdo faça sentido parado, porque é assim que o Google e o leitor de tela vão ler.