Neon Rain
Neon Rain is a particle background in the UI HUB particle backgrounds collection. A single WebGL scene on a pure black (#000102) stage with one shared uniform block and additive blending (depthTest/depthWrite off).
The component is driven by 4 documented props (className, style, compact, hint), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Three.js WebGLRenderer + ShaderMaterial with custom GLSL; InstancedBufferGeometry + InstancedBufferAttribute for streaks, Points + BufferGeometry for sparkles; AdditiveBlending with depthTest/depthWrite disabled.
Preview the particle background in the browser above, copy the source, and paste it into your project. Particle Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Neon Rain?
A neon downpour of additive light-trail rain over infinite depth: 175 glowing cyan streaks plus ~900 twinkling sparkles above a weighted neon-cyan floor that hums in flickering columns, with pointer swirl/repulsion, a spring-smoothed pointer and a click shockwave ring across the floor.
Neon Rain at a glance
- Category
- Particle Backgrounds
- Pricing
- Free to use
- Libraries
- React and Three.js
- Styling
- Tailwind CSS
- Configurable props
- 4
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Neon Rain works
A single WebGL scene on a pure black (#000102) stage with one shared uniform block and additive blending (depthTest/depthWrite off). Three layers: (1) a full-screen floor-glow quad (PlaneGeometry 2x2, renderOrder 0) whose fragment shader reads gl_FragCoord to build neon-cyan columns — per-column height hh1 = (14 + 150*pow(h1(floor(x)),3)) * boost with slow sin flicker fl1, plus medium (floor(x/3)) and wide (floor(x/9)) height columns, a vertical falloff base = (0.72*exp(-b/34) + 0.3*exp(-b/95)) * bandNoise, a pointer glow band fm = exp(-((x-mx)/130)^2)*uActive and a click shockwave ring = exp(-((|x-pulseX| - age*380)/34)^2)*exp(-age*1.8); (2) ~175 instanced streaks (InstancedBufferGeometry from a 1x1 PlaneGeometry, renderOrder 1) that fall with head = mod(phase*travel + speed*uSc*uTime, travel) and a power(2.3) tail fading from vec3(0,.5,.72) to vec3(0,.92,1) with a white head; (3) ~900 additive Points sparkles (renderOrder 2) with a twinkle = 0.72 + 0.28*sin(uTime*7 + seed*40) and a palette of 5 neon blues/cyans. Streak/dot counts scale with area/(580*580) (streaks capped 900, dots capped 4000) and uSc = max(0.6, h/580) so the look matches the 580px reference. Pointer: everything pushed along sign(d.x) with exp(-|d|^2/r^2)*uActive (r = 150*uSc for streaks, *0.9 for dots) plus a velocity sway; the pointer is spring-smoothed each frame (k=140, damping 2*sqrt(k*0.6)*0.85, mass 0.6) and a pointerdown pulses the floor ring at that x. prefers-reduced-motion runs the clock at 0.2x.
Technical information for Neon Rain
| Category | Particle Backgrounds |
|---|---|
| Libraries | React and Three.js |
| Styling | Tailwind CSS |
| Rendering | HTML canvas, ResizeObserver |
| State change | black stage with a faint neon-cyan floor hum and the hint line to a full neon downpour: 175 cyan streaks + 900 sparkles swirling away from the pointer over a pulsing floodlit floor |
| Props | 4 configurable |
| Usage example | Not published yet |
What Neon Rain requires
- Three.js WebGLRenderer + ShaderMaterial with custom GLSL
- InstancedBufferGeometry + InstancedBufferAttribute for streaks, Points + BufferGeometry for sparkles
- AdditiveBlending with depthTest/depthWrite disabled
- ResizeObserver on the container (rebuilds geometry per resize)
- requestAnimationFrame render loop with capped delta
- pointermove / pointerdown / pointerleave / pointercancel listeners on the container with getBoundingClientRect-local coordinates
- spring-smoothed pointer integrator
- prefers-reduced-motion matchMedia (0.2x time scale)
- full dispose on unmount (cancel rAF, disconnect ResizeObserver, dispose geometries/materials/renderer)
Neon Rain questions
What is Neon Rain?
A neon downpour of additive light-trail rain over infinite depth: 175 glowing cyan streaks plus ~900 twinkling sparkles above a weighted neon-cyan floor that hums in flickering columns, with pointer swirl/repulsion, a spring-smoothed pointer and a click shockwave ring across the floor.
How does Neon Rain work?
A single WebGL scene on a pure black (#000102) stage with one shared uniform block and additive blending (depthTest/depthWrite off). Three layers: (1) a full-screen floor-glow quad (PlaneGeometry 2x2, renderOrder 0) whose fragment shader reads gl_FragCoord to build neon-cyan columns — per-column height hh1 = (14 + 150*pow(h1(floor(x)),3)) * boost with slow sin flicker fl1, plus medium (floor(x/3)) and wide (floor(x/9)) height columns, a vertical falloff base = (0.72*exp(-b/34) + 0.3*exp(-b/95)) * bandNoise, a pointer glow band fm = exp(-((x-mx)/130)^2)*uActive and a click shockwave ring = exp(-((|x-pulseX| - age*380)/34)^2)*exp(-age*1.8); (2) ~175 instanced streaks (InstancedBufferGeometry from a 1x1 PlaneGeometry, renderOrder 1) that fall with head = mod(phase*travel + speed*uSc*uTime, travel) and a power(2.3) tail fading from vec3(0,.5,.72) to vec3(0,.92,1) with a white head; (3) ~900 additive Points sparkles (renderOrder 2) with a twinkle = 0.72 + 0.28*sin(uTime*7 + seed*40) and a palette of 5 neon blues/cyans. Streak/dot counts scale with area/(580*580) (streaks capped 900, dots capped 4000) and uSc = max(0.6, h/580) so the look matches the 580px reference. Pointer: everything pushed along sign(d.x) with exp(-|d|^2/r^2)*uActive (r = 150*uSc for streaks, *0.9 for dots) plus a velocity sway; the pointer is spring-smoothed each frame (k=140, damping 2*sqrt(k*0.6)*0.85, mass 0.6) and a pointerdown pulses the floor ring at that x. prefers-reduced-motion runs the clock at 0.2x.
Which category does Neon Rain belong to?
Neon Rain is listed under Particle Backgrounds in the UI HUB catalog. Particle backgrounds render tens of thousands of points on the GPU: spheres, halos, fields and constellations that drift, glow and react to the pointer. They are the heaviest components in the library, so each one lists its rendering approach and requirements before you copy it. Use them as hero backdrops, section backgrounds or full-page intros where a static gradient would fall flat.
What does the className prop do in Neon Rain?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Neon Rain?
Optional inline styles for the root container. It defaults to {}.
Is Neon Rain free to use?
Neon Rain is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Neon Rain use?
Neon Rain uses React and Three.js and is styled with Tailwind CSS.
What does Neon Rain need to run?
Neon Rain needs Three.js WebGLRenderer + ShaderMaterial with custom GLSL, InstancedBufferGeometry + InstancedBufferAttribute for streaks, Points + BufferGeometry for sparkles, AdditiveBlending with depthTest/depthWrite disabled and ResizeObserver on the container (rebuilds geometry per resize).