Digital Rain
Matrix-style digital rain effect with abstract gradient background.
Main Features of Digital Rain
How to Use Digital Rain in Next.js
Installation Guide for Digital Rain
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #000000 | Background color |
rainCount | number | 40 | Number of rain columns |
rainColor | string | #4ade80 | Rain color |
rainWidth | string | 1px | Rain width |
rainMinHeight | number | 10 | Minimum rain height percentage |
rainMaxHeight | number | 40 | Maximum rain height percentage |
rainMinDuration | number | 1 | Minimum rain animation duration |
rainMaxDuration | number | 3 | Maximum rain animation duration |
rainMaxDelay | number | 2 | Maximum rain delay |
rainOpacity | number | 0.5 | Rain opacity |
gradientFrom | string | rgba(0, 0, 0, 0) | Gradient start color |
gradientVia | string | rgba(20, 83, 45, 0.1) | Gradient middle color |
gradientTo | string | rgba(0, 0, 0, 0.8) | Gradient end color |
glowColor | string | rgba(34, 197, 94, 0.05) | Glow color |
glowSize | string | 500px | Glow size |
glowBlur | string | 150px | Glow blur |
glowOpacity | number | 1 | Glow opacity |
grainOpacity | number | 0.3 | Grain overlay opacity |
grainBaseFrequency | string | 0.65 | Grain base frequency |
grainOctaves | number | 3 | Grain octaves |
title | string | System | Title text |
className | string | Additional CSS classes |
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QCan I use different colors?
Yes, you can change the `rainColor` to anything from classic matrix green to cyberpunk pink or minimal white.
QHow fast is the rain?
The speed is randomized per column within the `rainMinDuration` and `rainMaxDuration` range for a more complex, multi-layered feel.
QDoes it support custom characters?
This specific component uses stylized vertical lines for a more modern, abstract look that is less distracting than character-based rain.