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

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.

ReactWebGL3DInteractiveFont#three#3d#text#typography#iridescence#oil-slick#pearlescent#soap-bubble#headline#premium

Usage

import IridescentGradientTypography from '@crazygl/hero-iridescent-gradient-typography';

export default function Page() {
  return (
    <IridescentGradientTypography
      heading={"OIL\nSLICK"}
      subheading="Move your cursor — the colours travel like a soap bubble in sunlight."
      iridescenceIOR={1.7}
      headingFontFamily="Audiowide"
    />
  );
}

Customise

  • Content — heading (newlines split lines), subheading, ctaLabel/onCTAClick/ctaTextColor/ctaBgColor.
  • Geometry — extrudeDepth, bevelSize, letterSpacing.
  • Iridescence — iridescenceIOR, iridescenceMin/Max (nm film thickness), baseColor, metalness, roughness.
  • Motion — pointerParallax, idleSpinSpeed.
  • Background — bgTop, bgBottom, vignetteStrength, starfieldDensity.
  • Typography — headingFontFamily (Google fonts fetched as TTF), headingFontWeight.

Best for

  • Premium product launches and design-tool landing pages.
  • Beauty, fragrance, and fashion drops chasing a pearlescent look.
  • Music releases and creative studio / agency signature headlines.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-iridescent-gradient-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 IridescentGradientTypography from '@crazygl/hero-iridescent-gradient-typography';

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

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

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.

Iridescent Membrane

The whole background is a thin soap-bubble film — a translucent holographic membrane rendered with physically-based thin-film interference. Slow domain-warped flow drives the film thickness, so restrained pastel rainbows drift across the surface. The pointer presses on the membrane: the film stretches under the cursor and sends out concentric tension waves — single-wavefront ripples that perturb the thickness and shift the colour as they expand. Elegant, futuristic, premium.

Liquid Metal Typography

Heavy 3D headline rendered as molten chrome — letters wobble with FBM noise while staying readable, pointer creates localized ripples on the surface, and clicking triggers a quick splash wavefront. Floats over an image or video backdrop with a user-selectable HDRI driving the reflections.

Typography In Portal

Your headline rendered inside a glowing circular portal — text drifts across the opening, the rim glows and ripples with noise, and the pointer bends the portal in real time. Built as a single fullscreen WebGL shader that samples a canvas-rendered text texture with chromatic aberration.

Neon Tube Typography

A glowing neon-tube headline that flickers on, settles into a slow plasma breath, sparks on hover, and bends its glow toward the cursor. Rendered to a HiDPI canvas with rounded tube strokes plus stacked blurred copies for true additive bloom.Live customizer

Iridescent Gradient Typography

Extrusion Depth0.18Thickness of each glyph. 0.18 is the photogenic default; 0.4+ reads chunky/poster.Bevel Size0.015Edge rounding. Bigger bevel = more curved surface for the iridescence to play across, especially around the rim.Letter Spacing0.04Tracking between letters. Wider gaps let each glyph's colour bands read individually.Iridescence IOR1.7Refractive index of the iridescent film. 1.5 = water-on-glass; 1.7 = oil-on-water (the petroleum sequence); 2.0+ = mother-of-pearl.Film Thickness Min120nmFilm thickness at grazing angles. Lower values shift the spectrum toward cooler hues at the rim.Film Thickness Max720nmFilm thickness at facing angles. The (max − min) span controls how many hue cycles you see; ~600 nm spans one full cycle.Base TintBase reflectance tint under the iridescent film. White is the canonical petroleum look; warm tints lean rose-gold.Metalness0.780.7–0.85 is the iridescent-metal sweet spot. Pure metal (1.0) dims iridescence; dielectric (0) reads as plastic.Roughness0.1Crispness of the reflection. 0.05–0.15 produces sharp colour bands; above 0.25 the iridescence muddies.Pointer Parallax1How dramatically the camera tilts with the pointer. Tilting the camera shifts the per-fragment view angle, which is what makes the iridescence physically travel.Idle Drift Speed0.06Gentle ambient yaw drift so the iridescence stays alive even when the user isn't moving. 0 freezes it. Frozen automatically under reduced-motion.Background TopDeep base behind the headline. Iridescence pops on near-black; dark navy / midnight purple is the canonical petroleum-puddle backdrop.Background BottomLower gradient stop. Slight purple shift gives the scene depth.Vignette Strength0.7Radial darkening around the corners. 0.6–0.8 frames the headline; 0 flattens the scene.Starfield Density350Number of slowly drifting dust motes behind the headline. 0 hides the layer; >600 reads as snow.Heading Font (3D)Display face for the 3D headline. Default is Audiowide — wide, rounded, future-display letterforms whose generous surface lets the iridescence play across more area. 'Inherit' uses the bundled bold face. Picking any Google font fetches its TTF and rebuilds the glyphs.Heading Weight700Picks the matching static weight of the chosen font (falls back to nearest available; variable-only fonts parse to their default master).InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.