React Matrix Rain Background

A highly customizable Matrix-style digital rain background component for React applications. Perfect for cyberpunk, terminal, or tech-themed websites.

✨ Features

• 🎨 Fully Customizable - Change colors, speed, characters, and more
• ⚡ Performant - Optimized canvas rendering with configurable FPS
• 📱 Responsive - Automatically adapts to window resizing
• 🎯 TypeScript - Full TypeScript support with type definitions
• 🪶 Lightweight - Zero dependencies (except React)
• 🎭 Flexible - Use custom character sets and colors

📦 Installation

npm install react-matrix-rain-bg

or

yarn add react-matrix-rain-bg

🚀 Quick Start

import { MatrixRain } from 'react-matrix-rain-bg';

function App() {
  return (
    <div style={{ position: 'relative', height: '100vh' }}>
      <MatrixRain />
      <div style={{ position: 'relative', zIndex: 1 }}>
        {/* Your content here */}
        <h1>Your Content</h1>
      </div>
    </div>
  );
}

🎛️ Props

Prop	Type	Default	Description
color	string	"#00ff41"	Color of the falling characters (Matrix green)
fontSize	number	14	Font size of the characters in pixels
speed	number	33	Animation speed in milliseconds (33ms ≈ 30fps)
fadeOpacity	number	0.05	Opacity of the background fade effect (creates trails)
characters	string	Mixed set	Custom character set to display
className	string	""	Additional CSS class names
backgroundColor	string	"#0d1117"	Background color (hex format)

📖 Examples

Basic Usage

<MatrixRain />

Custom Green with Slower Speed

<MatrixRain
  color="#39ff14"
  speed={50}
/>

Blue Cyberpunk Style

<MatrixRain
  color="#00d4ff"
  backgroundColor="#000814"
  fontSize={16}
/>

Binary Rain

<MatrixRain
  characters="01"
  color="#00ff00"
/>

Purple Hacker Theme

<MatrixRain
  color="#bd93f9"
  backgroundColor="#1e1e2e"
  fontSize={12}
  speed={25}
/>

With Overlay for Better Text Readability

<div style={{ position: 'relative', minHeight: '100vh' }}>
  <MatrixRain />

  {/* Dark overlay */}
  <div style={{
    position: 'absolute',
    inset: 0,
    background: 'radial-gradient(circle, transparent 0%, rgba(0,0,0,0.8) 100%)',
    zIndex: 1
  }} />

  {/* Your content */}
  <div style={{ position: 'relative', zIndex: 2 }}>
    <h1>Readable Content</h1>
  </div>
</div>

🎨 Character Sets

Default character set includes:

• Binary: 01
• Japanese Katakana: アイウエオカキクケコ...
• English: ABCDEFGHIJKLMNOPQRSTUVWXYZ
• Symbols: {}[]<>/\|_-+=!@#$%^&*()

Custom Character Set Example

// Only use emojis
<MatrixRain characters="🔥💻⚡🚀💎🎯" />

// Only use code symbols
<MatrixRain characters="{}[]()<>/\;:.,=+-*&|!" />

// Only katakana
<MatrixRain characters="アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン" />

💡 Tips

1. Performance: Lower speed value = faster animation = more CPU usage
2. Readability: Use overlays or gradients to make text more readable over the rain
3. Mobile: Consider reducing fontSize and increasing speed on mobile devices
4. Accessibility: Provide a way to disable animations for users who prefer reduced motion

🎯 Use Cases

• Landing pages with a tech/cyberpunk theme
• Portfolio websites for developers
• Terminal-style applications
• Hacker/security-themed sites
• Background for login/auth pages
• Conference or event websites

🛠️ Development

# Clone the repo
git clone https://github.com/TerminalBlank/react-matrix-rain-bg.git

# Install dependencies
npm install

# Build
npm run build

📄 License

MIT © Terminal Blank

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check issues page.

⭐ Show Your Support

Give a ⭐️ if this project helped you!

---

Built with ❤️ by Terminal Blank