CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/extruded-3d-headline-sculpture

Extruded 3D Headline Sculpture

Your headline as a thick, bevelled 3D sculpture floating under three-point studio lighting. Each letter has glossy bevelled edges, the camera parallaxes with your pointer so the depth reads from every angle, a soft contact shadow + AO strip ground it, and a real mirrored reflection fades into the glossy floor. A CTA button hover sends a sweep of light across the letters.

ReactWebGL3DInteractiveFont#three#3d#text#sculpture#extrusion#pbr#headline#premium

Usage

import Extruded3DHeadlineSculpture from '@crazygl/hero-extruded-3d-headline-sculpture';

export default function Page() {
  return (
    <Extruded3DHeadlineSculpture
      heading={'Make it\nmonumental.'}
      extrudeDepth={0.4}
      clearcoat={0.8}
      ctaLabel="See it move"
    />
  );
}

Customise

  • Content — heading (rendered AS the 3D sculpture), subheading, ctaLabel / onCTAClick, CTA colours.
  • Sculpture — extrudeDepth, bevelSize, bevelSegments, letterSpacing, sculptureScale.
  • Material — textColor, metalness, roughness, clearcoat (together set the finish).
  • Lighting & floor — keyLightIntensity, envIntensity (studio reflection), shadowOpacity, showFloor, floorReflection.
  • Pointer — pointerParallax for how far the camera orbits with the cursor.
  • Typography — headingFontFamily / headingFontWeight; the selected Google font is fetched as real TTF and extruded into the glyphs.

Best for

  • Premium SaaS and AI product launch pages
  • Design studios, agencies and brand-led marketing sites
  • Fashion, beauty and luxury landing pages
  • Typography-forward portfolios and event headers
01 · Install the package

One command, zero config.

npm install @crazygl/hero-extruded-3d-headline-sculpture
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 Extruded3DHeadlineSculpture from '@crazygl/hero-extruded-3d-headline-sculpture';

export default function Landing() {
  return (
    <Extruded3DHeadlineSculpture />
  );
}
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 Extruded3DHeadlineSculpture from '@crazygl/hero-extruded-3d-headline-sculpture';

export default function Page() {
  return (
    <section>
      <Extruded3DHeadlineSculpture
        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

Extruded Logo Monolith

Drop in a transparent SVG (or PNG) logo and it becomes a glossy black 3D sculpture with bevelled edges, studio HDRI reflections, a mirror floor, and an animated rim-light sweep. Premium product-shot look for SaaS, agencies, and AI tools.

Iridescent Gradient Typography

Your headline cast in oil-slick iridescence. Real thin-film interference shifts the surface through cyan → green → gold → pink → violet → blue as you move the pointer, just like a soap bubble or a petrol puddle catching streetlight. Three.js TextGeometry + a MeshPhysicalMaterial iridescence layer, lit by a procedural HDR studio with concentrated softboxes.

Glass Logo Sculpture

Upload a logo (SVG / PNG / GLB) and watch it become a real 3D glass paperweight: Three.js MeshPhysicalMaterial with true volumetric transmission, per-wavelength dispersion, clearcoat, Beer-Lambert attenuation, ContactShadows, an HDRI-lit studio rig and pointer-driven parallax orbit that visibly bends the photographic background through the body.

Sculpted Light Bust

A polished marble sculpture under studio lighting. The pointer orbits a single bright key light around the bust in real 3D, raking it across the stone face for hot specular highlights, cool subsurface shadows in the recesses, and a warm rim that tracks the cursor like a real museum spotlight.

Glass Typography

A headline cast in transparent optical glass: Three.js TextGeometry extruded into a real 3D object, rendered with MeshPhysicalMaterial (transmission, IOR, dispersion, clearcoat) so it visibly refracts the moving gradient behind it. Pointer parallax tilts the camera and CTA hover sweeps a bright edge highlight across the letters.

Waving Flag Headline

Your headline printed on a slow-waving cloth flag. The fabric ripples in 3D with soft cinematic lighting; the cursor pushes the cloth like a gust of wind.Live customizer

Extruded 3D Headline Sculpture

Extrusion Depth0.4Bevel Size0.03Bevel Smoothness8Letter Spacing0.02Sculpture Scale1.6Sculpture ColorMetalness0.6Roughness0.35Clearcoat0.8Heading Y Offset-0.2worldVertical offset of the sculpture from its centred position. Negative pushes it down, positive lifts it up.Heading-to-Floor Gap0worldGap between the bottom of the heading and the reflective floor. 0 sits the letters ON the floor; higher values float them above.Pointer Parallax1Pointer rotates the camera around the sculpture so depth reads from multiple angles.Key Light Intensity1.4Studio Reflection1Contact Shadow0.5Show Reflective FloorFloor Reflection0.3Transparent backgroundBackground ColorHeading FontThe selected Google font is fetched as a real TTF and extruded into the 3D sculpture (and used for the subheading + CTA). "Inherit" uses a bundled bold sans. Variable-only fonts render at their default weight.Heading Font Weight700Honoured for fonts that ship a matching static weight; variable-only fonts ignore it.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.