Interactive 3D Text Hero

What this builds

A full-viewport hero section featuring extruded 3D text rendered in Three.js that reacts to cursor hover with physics-driven tilting, bouncing, or repulsion. The text floats in a lit scene with environment reflections, and each letter is an independent rigid body that settles back to rest after interaction.

• Extruded 3D letterforms with beveled edges, metallic or standard material
• Per-letter physics bodies via cannon-es (lightweight Cannon.js fork)
• Pointer raycasting drives per-letter impulse forces
• Rest-state spring return so letters re-settle after hover
• Responsive canvas sizing with DPR cap at 2
• Fallback flat text for reduced-motion and WebGL-unavailable contexts

When to use / when not to

• Use when the hero IS the brand name or a single word/phrase and you want it to feel alive and tactile.
• Use when the audience is design/tech-savvy and expects an interactive moment on first load.
• Do NOT use for paragraph-length text or anything over ~20 characters. Geometry count explodes.
• Do NOT use when the hero needs to carry readable body copy underneath the 3D text; the canvas will occlude it. Use hero-masked-video-type for text-as-window effects instead.
• Do NOT use if the project cannot take a ~200KB dependency floor (Three.js + cannon-es). For a lighter 3D text feel without physics, see three-js-fundamentals with a simple mousemove rotation.