sites-scroll-motion

Sites Scroll Motion

Dois sistemas de referência que informam esta skill:

• Fonte A: /agentes page (Next.js + React Three Fiber + Framer Motion)
• Fonte B: Verdana Digital Oasis (HTML vanilla + Three.js WebGPU + TSL + GPU Compute)

Seção 1 — Árvore de Decisão

Leia isto primeiro. Determine a técnica antes de escrever uma linha de código.

Objetivo de movimento
    │
    ├── Revelar elemento ao entrar na viewport
    │     ├── Simples → IntersectionObserver + CSS classes (zero deps)  [→ Seção 2]
    │     └── Física/spring → Framer Motion whileInView
    │
    ├── Transformar valor com scroll (opacity, x, y, scale)
    │     ├── 1 elemento → Framer Motion useScroll + useTransform       [→ Seção 5]
    │     └── Múltiplos com timeline → useScroll + useTransform multi-keyframe
    │
    ├── Parallax de fundo
    │     ├── Suave sem interação → CSS background-attachment: fixed
    │     └── Com mouse → dual-ref pattern (targetRef + smoothedRef via rAF) [→ Seção 4]
    │
    ├── Seção com efeito sticky + scroll-driven
    │     └── min-h-[150vh] + sticky child + Framer Motion useScroll    [→ Seção 5]
    │
    ├── CSS nativo de scroll snapping
    │     └── scroll-snap-type y proximity + scroll-snap-align start    [→ Seção 3]
    │
    ├── Câmera 3D com scroll (cena decorativa)
    │     ├── React project → React Three Fiber + CameraRig keyframe pattern [→ Seção 6]
    │     └── Vanilla HTML → Three.js WebGL + importmap + lerpCam()
    │
    ├── Cena 3D com objetos interativos (mouse, física)
    │     ├── Simples (planetas, starfield) → Three.js WebGL + useFrame [→ Seção 8]
    │     └── Complexo (>10k instâncias, simulação) → Three.js WebGPU + TSL + GPU Compute [→ Seção 9]
    │
    └── Post-processing (bokeh, glow, bloom)
          ├── React → @react-three/postprocessing (Bloom, DepthOfField)
          └── Vanilla → Three.js PostProcessing + TSL dof node          [→ Seção 9]

Em projeto Astro: os caminhos de Vanilla HTML/CSS/Three.js WebGL (Seções 2-4, 8) funcionam sem nenhuma mudança — é o ambiente nativo do Astro. Os caminhos que usam Framer Motion ou React Three Fiber (Seções 5-6) exigem que o componente vire uma ilha React com diretiva client:visible (ou client:load se for hero acima da dobra) — a técnica em si (useScroll, useTransform, CameraRig) não muda.