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

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.

ReactWebGLInteractiveFont#typography#glass#rain#refraction#cinematic#premium

Usage

import RainyGlassTypography from '@crazygl/hero-rainy-glass-typography';

export default function Page() {
  return (
    <RainyGlassTypography
      heading="Through the rain."
      glassFog={0.6}
      dropCount={64}
    />
  );
}

Customise

  • Content — heading, subheading, ctaLabel, onCTAClick.
  • Glass — condensationOpacity, glassTint, glassFog.
  • Drops — dropCount, dropSizeMin, dropSizeMax, dropSpeed, dropMergeStrength.
  • Wipe — wipeRadius, wipeFadeTime.
  • Text / Background — textColor, textGlow, backgroundDim, bgColor.
  • Typography — headingFontFamily, headingFontWeight.

Best for

  • Film and photography portfolios
  • Moody product launches and fragrance/fashion landing pages
  • Atmospheric editorial or agency sites wanting a weather-soaked headline
01 · Install the package

One command, zero config.

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

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

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

Rain on Glass

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

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.

Glass Cube Maze

Raymarched lattice of transparent glass cubes drifting in 3D space. The cursor orbits the camera, and chromatic dispersion paints rainbow rims along the hits.

Glass Panels

Liquid-glass panels in WebGL — half-sphere bevel, biconvex refraction (entry + exit + thickness), edge-weighted blur mix, multi-light Blinn-Phong specular, Fresnel rim, drop shadow. Drop in any background image and it gets bent through the glass.

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.

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.Live customizer

Typography Through Rainy Glass

Condensation opacity0.55How frosted the glass body looks between drops. 0 = clean glass; 1 = thick condensation.Glass tintCool tint mixed into the fogged glass body, sells the cool damp-pane feel.Glass fog density0.6How much the slow condensation pattern obscures the text. 0.45-0.75 is the cinematic sweet spot.Drop count64Number of droplets on the pane. 40-80 reads as a steady drizzle.Smallest drop5.5pxMinimum droplet radius in pixels.Largest drop15.5pxMaximum droplet radius. Larger drops fall faster and leave rivulets.Fall speed1How fast the drops slide down the pane. 0 freezes them in place.Merge tendency0.42How aggressively overlapping drops coalesce. 1 = always merge on contact.Wipe radius130pxHow wide an arc the cursor clears as it moves across the glass.Wipe fade time2.5sHow long a wiped patch stays clear before condensation grows back.Text colorHeadline color rendered on the canvas behind the glass. Bright warm tones feel cinematic against cool fog.Text glow1.2Soft halo behind the text, adds the wet-light bloom you see through real condensation.Background dim0.6How much the deep backdrop darkens. Higher = more cinematic.Background colorDeepest layer behind the text, the moody backdrop the headline sits on.Heading FontHeading Weight800InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.