CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/typographic-3d-transformer

Typographic 3D Transformer

A single extruded 3D word sits in the centre of the stage with a glassy candy finish under a RoomEnvironment studio. Move the cursor horizontally and the whole word rotates to face you; move vertically and each letter individually leans toward the cursor — closer letters bend more.

ReactWebGL3DInteractiveFont#3d#type#typography#extrude#glass#candy#premium#pointer#three

Usage

import TypographicTransformer from '@crazygl/hero-typographic-3d-transformer';

export default function Landing() {
  return (
    <TypographicTransformer
      word="HELLO"
      letterColor="#ffffff"
      clearcoat={1}
    />
  );
}

Customise

  • Type — word (3–6 letters read best), letterColor, letterRoughness, letterMetalness, clearcoat, extrudeDepth, letterSpacing.
  • Motion — rotateStrength (whole-word yaw), tiltStrength (per-letter lean), springDamping.
  • Lighting — keyIntensity / keyColor, rimIntensity, fillIntensity.
  • Backdrop — transparent, backgroundTop / backgroundBottom.

Best for

  • Type-driven landing pages and brand wordmarks.
  • Conference / event microsites.
  • Design-tool showcases that want a tactile interactive headline rather than a flat decal.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-typographic-3d-transformer
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 Typographic3DTransformer from '@crazygl/hero-typographic-3d-transformer';

export default function Landing() {
  return (
    <Typographic3DTransformer />
  );
}
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 Typographic3DTransformer from '@crazygl/hero-typographic-3d-transformer';

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

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.

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.

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.

Magnetic Dot Cloud

Thousands of floating 3D points settle into a soft sphere of light. Wherever you point, a gravity well opens — nearby dots erupt radially outward from the sphere's centre, bulging the cloud like a living particle sculpture. A critically-damped spring eases every swell in and out; idle, the whole field drifts and turns.

Ice Encased Logo

Your logo is frozen inside a chunky beveled cube of real refractive ice. Three.js MeshPhysicalMaterial with IOR 1.31, clearcoat, Beer-Lambert blue attenuation and chromatic dispersion bends the studio HDRI around the brand. Frost on the front face melts on load to reveal the logo inside a clear ice-cube body.

WALL-E

An animated 3D WALL-E that watches your cursor. His binocular head tracks the pointer with a soft, critically-damped spring — he idles, blinks, leans, and trundles a little on his treads to keep you in view, then perks up and bobs excitedly when you hover the call-to-action. Robot on the left, copy and CTA on the right. Premium, characterful, alive.Live customizer

Typographic 3D Transformer

WordThe extruded word. Short words (3–6 letters) read best — the rotation arc is most expressive at that length.Letter colourBase diffuse of the extruded glyphs. Pure white sits cleanly under the studio probe; pick a strong saturated colour for a candy look.Surface roughness0.18Lower = sharper, brighter highlights; higher = matte plastic. 0.18 is the polished-candy sweet spot.Metalness0Push to 1 for chrome letters; 0 for the default glass-candy read.Clearcoat1Thin glossy varnish layer on top. 1 = wet, lacquered finish; 0 = bare surface.Extrude depth0.18How deep each letter is pushed into the screen.Letter spacing0.06Extra gap between adjacent letters. 0 reads as a single block; high values let each letter tilt independently.Word rotation0.7How far the whole word rotates around its vertical axis to track the cursor horizontally.Per-letter tilt0.55How much each individual letter leans toward the cursor on the vertical axis. Letters nearer the cursor lean more.Spring damping6Higher values snap to the cursor quickly; lower values float and drift.Key intensity2.4Key colourRim intensity1Studio fill0.6Transparent backgroundBackdrop topBackdrop bottomInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.