Hero made by @ybouane.

@crazygl/hero-data-rain-reveal

Elegant colored data streams fall behind a central product screenshot in four refined tints, with a few drops drifting in front for parallax depth. Cyberpunk but refined.

Demo

Data Rain Product Reveal

Install

npm install @crazygl/hero-data-rain-reveal

Usage

import HeroDataRainReveal from '@crazygl/hero-data-rain-reveal';

export default function Page() {
  return (
    <HeroDataRainReveal
      screenshot="https://crazygl.com/samples/screenshot-dashboard-dark.avif"
      heading="Data, refined."
      dropCount={200}
      dropSpeed={1.0}
    />
  );
}

Customise

• Content — contentType (heading / two-columns / custom) plus heading, subheading, column1/column2, or content.
• Screenshot — screenshot (aspect read from the texture), screenshotX/Y, screenshotScale, screenshotTilt, screenEmissive.
• Rain — dropCount, dropSpeed, dropStreamLength, and the four streamColor1–4 tints.
• Atmosphere — bloomStrength, haloColor, haloStrength, bgTop/bgBottom, transparentBackground.
• Motion — parallaxStrength (pointer parallax).

Best for

• Data products and AI analytics platforms
• Observability and fintech dashboards
• BI tools and model-monitoring suites
• Any "raw signal in, structured insight out" brand story

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.