Hero made by @ybouane.

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

Demo

Typographic 3D Transformer

Install

npm install @crazygl/hero-typographic-3d-transformer

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.

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.