Hero made by @ybouane.

@crazygl/hero-rain-on-glass

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

Demo

Rain on Glass

Install

npm install @crazygl/hero-rain-on-glass

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.

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.