CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/3d-depth-text-effect

3D Depth Text

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

ReactInteractiveFont#3d#depth#typography

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-3d-depth-text-effect
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import 3DDepthText from '@crazygl/hero-3d-depth-text-effect';

export default function Landing() {
  return (
    <3DDepthText />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <3DDepthText
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Rotating Text Pro

Slot machine with a 3D flip in X — the rotating word flips over a horizontal axis like a split-flap board.

Text Illuminate

A spotlight follows the cursor across the heading — letters under the beam glow and brighten, the rest fall into shadow.

Depth Wave Field

A perspective grid of small glowing dots forms an undulating 3D wave terrain that recedes into the distance and fades to black — the look of a topographic depth-sensing point cloud. Smooth traveling waves ripple through the field; crests glow electric violet, troughs and far rows sink into deep indigo. The pointer pushes a ripple toward the cursor.

Gradient Text

Heading filled with a slowly drifting multi-stop linear gradient — three configurable colours, customizable angle, optional animation.

Data Rain 3D

Characters, digits and small symbols fall through a real 3D perspective volume. Near glyphs are large and bright, far ones shrink and dissolve into depth fog. Move the cursor and the falling stream curves around it, like rain hitting an invisible umbrella.

Kinetic Text

Stacked lines where each word is timed independently — bounce in, rotate, scale, on a choreographed sequence. Pick whether the show plays on load, follows scroll, or loops forever.Live customizer

3D Depth Text

Depth layers22Layer spacing (px)2pxTilt strength12Face colourSide colourFont size220pxFontWeight900Transparent backgroundBackgroundCrazyGL · crazygl.comProgrammable hero sections for real websites.