Hero made by @ybouane.

@crazygl/hero-3d-depth-text-effect

Heading extruded with stacked text-shadow layers — a faux-3D effect with a slow camera-style tilt that follows the cursor.

Demo

3D Depth Text

Install

npm install @crazygl/hero-3d-depth-text-effect

Usage

import ThreeDDepthText from '@crazygl/hero-3d-depth-text-effect';

export default function Hero() {
  return <ThreeDDepthText heading="DEEP" depthLayers={22} sideColor="#5b8def" />;
}

Customise

• Content — heading text.
• Extrusion — depthLayers (number of stacked shadow copies), depthSpacing (px between layers), tiltStrength (max cursor-driven tilt in degrees).
• Typography — faceColor, sideColor (the extruded side), fontSize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground, bgColor.

Best for

• Bold typographic landing pages and product launches.
• Portfolio and agency splash headings that want depth without 3D tooling.
• Event / poster-style heroes where one big word carries the page.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.