Hero made by @ybouane.

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

Demo

Iridescent Gradient Typography

Install

npm install @crazygl/hero-iridescent-gradient-typography

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.

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.