Interactive 3D Layered Text Wave Effect

This is an Interactive 3D Layered Text Wave Effect. It transforms a flat heading into a dynamic, multi-layered typographical stack that tracks cursor movement. Its function is to create immersive, interactive hero sections, replacing static typography with a playful spatial experience.

Specs

• Weight: ~3 KB. Zero dependencies.
• Performance: High. The script utilizes GPU-accelerated translate3d within a native requestAnimationFrame loop to ensure a consistent 60 FPS output.
• Theming / Customization: Typography and colors are hardcoded in CSS. Easily adjustable via standard class selectors and vw units.
• Responsiveness: Fluid. Relies purely on viewport width (vw) for typography scaling and recalculates the central bounding rect on the window resize event.
• Web APIs: DOM Rect API (getBoundingClientRect).
• Graceful Degradation: Fails safe. If JavaScript is disabled, the text remains static but retains its default 3D CSS perspective.

Anatomy

The component stacks identical elements, hiding duplicates from assistive technologies.

• HTML (The Skeleton): An h1 element paired with multiple span copies. The duplicates utilize aria-hidden="true", ensuring screen readers only parse the primary word once.
• CSS (The Skin): Absolute positioning anchors the stack. Native text-shadow generates the heavy outlines, while absolute z-index manages depth sorting.
• JS (The Nervous System): A custom animation loop. It tracks cursor coordinates, interpolates the distance to the center, and applies a calculated matrix of rotate, skew, and translate to each layer.

Logic

The core mechanism relies on index-based staggering. This is the Glyph-logic of the snippet:

for (var i = 1; i < copies.length + 1; i++) {
  const copy = copies[i - 1];
  copy.style.transform = makeTransformString(
    i * distanceLerped.y * 0.03,
    i * translateZ,
    i * rotate * (distanceLerped.x * 0.003),
    i * skew * (distanceLerped.x * 0.003)
  );
}

Instead of applying the same generic transform to every element, the script multiplies the movement offsets by the element’s index (i). This mathematical staggering amplifies the spatial distortion for the layers furthest behind the front text. It perfectly mimics the physics of an accordion or slinky bending in 3D space.

Feel

Playful and fluid. The linear interpolation (lerpV2) injects a viscous drag into the motion; the text does not snap to the cursor but lazily trails it. When the mouse is idle, the sinusoidal auto-simulation breathes life into the element, making the interface feel organic even before user interaction begins.