Hero made by @ybouane.

@crazygl/hero-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.

Demo

Extruded 3D Headline Sculpture

Install

npm install @crazygl/hero-extruded-3d-headline-sculpture

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

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.