HERO · PARALLAX
Ambient depth that follows the cursor.
The canvas is a background layer; the page hosts copy and CTAs as usual. Floating geometry breathes via drei <Float>; the camera lerps toward the cursor in useFrame. Zero React re-renders during interaction.
Move the cursorScroll for context
Where this pattern shows up
Agency homepages (Lusion, Active Theory, Resn), product-launch pages, creative-studio portfolios. Anywhere the brand wants ambient motion behind a static hero copy without committing to a full immersive 3D scene.
Why it works
- Parallax is the cheapest pseudo-3D cue the brain registers — subtle camera lerp signals depth without committing to a navigable scene.
<Float>adds idle drift so the canvas never freezes when the cursor is still.- The ref-based mouse pipeline keeps the React tree static — the page hydrates once and stays cheap on the main thread.
Variations
- Replace primitives with brand objects: a glTF logo, product renders, abstract typography.
- Add post-processing (bloom, chromatic aberration) for a heavier, generative feel.
- Drive the camera target by scroll instead of mouse for a scroll-parallax variant.