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

Frosted Typography

Crystalline frost grows across the headline like ice forming on glass; the cursor acts as warmth, melting frost where it passes.

ReactWebGL3DInteractiveFont#typography#frost#ice#winter#premium#crystalline

Usage

import FrostedTypography from '@crazygl/hero-frosted-typography';

export default function Page() {
  return (
    <FrostedTypography
      heading="Winter glass."
      frostColor="#e6f2ff"
      frostRoughness={0.6}
      growDuration={2.8}
      ctaLabel="Explore the collection"
    />
  );
}

Customise

  • Frost — frostColor (bright crystal highlight), frostBaseColor (cooler body tint), frostRoughness (0 = soft condensation, 1 = sharp shattered ice), frostGrowthDirection (0–360° the ridges flow along).
  • Reveal — growOnLoad, growDuration (how long the frost takes to form), growChunkiness (uniform fade vs advancing crystalline patches).
  • Pointer heat — heatRadius, heatStrength (how much the cursor melts), heatDecay (how fast a melted patch refreezes).
  • Particles — particleCount, particleSize, particleSpeed for the airborne ice flecks.
  • Background & Type — bgTop / bgBottom gradient, transparentBackground, plus heading, headingFontFamily, headingFontWeight, headingSize, lineSpacing, headingY.

Best for

  • Luxury and premium product launches (eyewear, watches, spirits, fashion)
  • Seasonal and holiday campaign pages
  • Editorial cover sections and brand statement headers
  • High-end hospitality, ski, and winter-resort sites
01 · Install the package

One command, zero config.

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

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

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

Ice Surface

A glassy frozen pane fills the frame. Tap or drag to spread fresh cracks; old fractures slowly heal.

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.

Typography Shadows

Abstract letterforms floating at different depths behind the hero, with dramatic shadows and pointer-driven parallax.

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.

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.

Particle Typography

A dusty 3D volume of tiny floating characters — abstract micro-typography drifting in depth. The pointer pulls characters into rings and streams, and where the cursor dwells the dust briefly organises itself into a real word before scattering back into the haze.Live customizer

Frosted Typography

Frost highlightBright crystal highlight color.Frost baseCooler base tint of the frost body.Roughness0.6How jagged and broken the crystal edges look. 0 = smooth condensation; 1 = sharp shattered ice.Growth direction0°Direction the crystal ridges flow along. 0 / 180 grow horizontally, 90 / 270 grow vertically.Grow on loadWhen on, the frost animates in from nothing on first paint.Grow duration2.8sHow long the frost takes to fully form.Chunkiness0.5How blocky the growth front is. 0 = uniform fade; 1 = the frost grows in big crystalline patches.Heat radius110pxRadius around the cursor that receives heat each frame.Heat strength1How much frost the cursor melts away. 0 = no melt; 2 = aggressive wipe.Heat decay1.2How fast the warmth fades. Higher = the molten patch refreezes sooner.Particle count30Number of drifting ice crystals in the air. 0 disables them.Particle size2pxBase pixel size of the floating ice flecks.Particle speed1How quickly the airborne crystals drift.Background topBackground bottomTransparent backgroundDrop the dark winter gradient so the hero composes over the surrounding page.Heading FontFont the headline is rasterised in. Defaults to Cormorant Garamond; "Inherit" uses a bundled serif display face so the poster needs no network.Heading Weight900Heading size0.9Overall size of the headline. 1 is the default fit; below 1 leaves more breathing room, above 1 pushes the type larger (capped by the canvas).Line spacing0.8Multiple of the font size used as the line height. Lower packs lines tighter; higher opens them up. Only takes effect when the headline wraps to two lines.Heading Y position0Vertical offset of the headline within the canvas. Negative lifts toward the top; positive pushes down. Expressed as a fraction of the canvas half-height.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.