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

Rain on Glass

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

ReactWebGLImageInteractiveFont#rain#droplets#refraction#glass#premium

Usage

import RainOnGlass from '@crazygl/hero-rain-on-glass';

export default function Page() {
  return (
    <RainOnGlass
      heading="Window pane."
      backgroundImage="https://example.com/photo.jpg"
      dropCount={50}
      blur={14}
    />
  );
}

Customise

  • Background — backgroundImage (cover-fitted; frosted for the pane, sharp inside drops/trails), blur (frosted px).
  • Rain — dropCount, dropSize, fallSpeed, refraction, chroma (rainbow rim), trailStrength.
  • Content — heading / subheading, or two-columns / custom, plus heading font.

Best for

  • Moody product launches and music/film promo pages.
  • Atmospheric editorial sites.
  • Hospitality and travel brands wanting a cinematic, rainy mood.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-rain-on-glass
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 RainOnGlass from '@crazygl/hero-rain-on-glass';

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

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

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

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

Rain on Glass

Background imageFrosted blur14pxDrops50Drop size1Fall speed1Refraction1Chromatic dispersion1Trail clarity1Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.