CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/glass-typography

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.

ReactWebGL3DImageInteractiveFont#glass#typography#headline#three#transmission#dispersion#refraction#pbr#luxury#premium

Usage

import GlassTypography from '@crazygl/hero-glass-typography';

export default function Page() {
  return (
    <GlassTypography
      heading="Crystalline."
      backgroundImage="https://crazygl.com/samples/nature1.avif"
      ior={1.45}
      dispersion={1.2}
    />
  );
}

Customise

  • Content — heading (the word cast in glass), subheading.
  • CTA — ctaLabel, onCTAClick (URL string or function); hovering it triggers the sweep.
  • Glass material — textColor, transmission, roughness, ior, glassThickness, dispersion.
  • Lighting — envIntensity (procedural HDRI strength).
  • Backdrop — bgMode (image / gradient), backgroundImage (image or video, cover-fit, screen-locked), or bgGradientStart/End/Angle + bgAnimationSpeed.
  • Interaction & sweep — pointerParallax, sweepColor, sweepDuration.
  • Typography — headingFontFamily, headingFontWeight, headingY.

Best for

  • Luxury product pages and premium SaaS / design-tool launches
  • Fintech and private-banking landing pages
  • High-end agency and portfolio sites where the headline is the hero object
01 · Install the package

One command, zero config.

npm install @crazygl/hero-glass-typography
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 GlassTypography from '@crazygl/hero-glass-typography';

export default function Landing() {
  return (
    <GlassTypography />
  );
}
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 GlassTypography from '@crazygl/hero-glass-typography';

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

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.

Product Inside a Glass Capsule

A product floats inside a transmissive glass capsule, like a luxury museum object or futuristic sample container — refraction through the shell, a frosted inner layer, a band of condensation, slow rotation and a soft pedestal glow.

Typography Through Rainy Glass

A large bright headline sits behind a fogged glass pane covered in sliding water droplets. The drops refract the type; the cursor wipes a clear arc as you move.

Glass Tile Logo

The logo is reconstructed from a grid of small glass blocks. Each tile floats apart, refracts the background through real MeshPhysicalMaterial transmission, then assembles into the silhouette on load. Hover separates the tiles slightly. Built with Three.js InstancedMesh + HDRI reflections + soft contact shadows.

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.

Rain on Glass

Looking through a glass pane in the rain — droplets refract the background, slide down with gravity, and leave thin trails.Live customizer

Glass Typography

CTA labelButton label sitting under the glass headline. Hovering it triggers the sweep across the letters.On CTA clickURL to navigate to when the CTA is clicked. From code you can also pass a function — same prop name, type-detected at runtime.Glass tintBase color of the glass body. White = pure optical glass; very faint blue / amber tints look premium.Transmission1How transparent the glass is. 1 = fully see-through (real glass). Below 0.6 the letters start to read as frosted plastic.Roughness0.06Microfacet roughness of the body. 0 = perfect crystal (cold). 0.05–0.1 = real polished optical glass. Above 0.2 reads as frosted.Index of refraction1.451.0 = air (no bend). 1.33 = water. 1.45–1.5 = window glass / BK7 crown. 1.77 = sapphire.Volumetric thickness0.6Beer–Lambert path length through the body. 0.4–0.8 reads as subtle optical glass; above 1.4 picks up a noticeable tint.Dispersion1.2Per-wavelength IOR spread — paints a faint rainbow seam at each letter edge. 0.8–1.5 reads as premium optical glass; above 2.2 turns the letters into a prism.Environment intensity1.5Strength of the procedural HDRI driving the clearcoat reflections and rim halo. 1.2–2.0 is the sweet spot.Background modePick the backdrop the glass refracts. Image/video and gradient are mutually exclusive — switch between them, you don't blend them.Background mediaPhotographic or video backdrop. Supports PNG / JPG / WebP / AVIF as well as MP4 / WebM / MOV. Cover-fit (never stretched) and locked to the screen — it does NOT move with the pointer parallax. Videos play muted-and-looping; some browsers require a first user gesture before autoplay.Pointer parallax1How strongly the camera tilts in response to the pointer. The refraction angle changes naturally with the tilt. 0 = locked; 1 = subtle; 2 = pronounced.Sweep colourColour of the bright edge highlight that travels across the letters when the CTA is hovered.Sweep duration1.2sHow long one pass of the highlight takes to travel across the headline. 0.9–1.4 reads as intentional; below 0.6 feels twitchy.Heading fontFont family for the 3D glass headline. The real glyph outlines are fetched as a TTF and extruded into geometry, so your choice changes the letterforms. "Inherit" uses a bundled Helvetiker Bold face (no network dependency). Variable-only Google fonts extrude at their default weight.Heading weight700Weight of the glass headline. Honoured for static-weight Google fonts; "Inherit" always uses the bold bundled face.Heading Y position0worldVertical offset of the glass headline. 0 centres it; negative pushes it down, positive lifts it up.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.