Data Rain
Matrix data rain stats section with falling characters.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| stats | Array<{value: number, label: string}> | [] | Array of stat items with value and label. |
| backgroundColor | string | #000000 | Background color (hex, rgb, or hsl). |
| canvasTextColor | string | #0F0 | Canvas text color for matrix effect. |
| canvasOpacity | number | 0.5 | Canvas opacity (0-1). |
| cardBgColor | string | rgba(0,0,0,0.8) | Card background color. |
| cardBorderColor | string | rgba(0,255,0,0.5) | Card border color. |
| cardShadowColor | string | rgba(0,255,0,0.3) | Card shadow color. |
| promptTextColor | string | rgba(0,255,0,0.7) | Prompt text color. |
| valueColor | string | #4ade80 | Value text color. |
| progressBarBgColor | string | #14532d | Progress bar background color. |
| progressBarColor | string | #22c55e | Progress bar fill color. |
| labelTextColor | string | #16a34a | Label text color. |
| labelText | string | initialized | Label text. |
When to Use
Perfect for deep-tech brands, developer tools, and Next.js experiences that want a futuristic, 'hacker' aesthetic. Use this React component for a matrix-themed stats section with falling character rain and terminal-style cards.
Best Practices
Maintain scalable component architecture by keeping foreground text bright and readable. Follow React best practices by pairing this with dark-themed layouts. Optimize for performance by managed the canvas-based character rain.
Why This Component Matters
Cyber aesthetics create a sense of scale and technical depth. This production-ready UI component helpsคุณ build an interface that feels atmospheric and advanced, adding semantic authority to your project's digital architecture.
FAQ
QIs the matrix rain real?
Yes, it's rendered on a transparent HTML5 canvas behind the stat cards, providing a dynamic and immersive 'digital rain' effect.
QCan I customize the falling text?
The `canvasTextColor` prop allows you to change the character color from classic Matrix green to any brand-specific neon color.
QDo the cards have progress bars?
Yes, each stat card features a terminal-style progress indicator that pulses as if data is being actively decoded.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.