Dual Tone Rain Background

Installation

Usage

import DualToneRainBackground from "@/components/ruixen/dual-tone-rain-background";
 
export default function App() {
  return (
    <div className="relative h-screen w-full">
      <DualToneRainBackground />
      <div className="relative z-10">{/* Your content here */}</div>
    </div>
  );
}

Features

• Dual-Tone Design: Uses a sophisticated teal-cyan color scheme
• Complex Rain Pattern: Multiple layers of rain streaks with varying sizes
• Grid Overlay: Enhanced grid pattern with backdrop blur
• Smooth Animation: 150-second animation cycle for seamless looping
• Pure CSS: No JavaScript dependencies
• Performance Optimized: Uses CSS transforms and efficient animations

Customization

The component uses a CSS custom property for the main accent color:

.rain-container {
  --c: #00b8a9; /* tuned accent color: teal-cyan */
}

You can customize the color by overriding this property:

.your-custom-class .rain-container {
  --c: #ff6b6b; /* custom coral color */
}

Differences from Rain Background

• Color Scheme: Uses teal-cyan instead of blue-purple
• Pattern Complexity: More intricate rain pattern with additional layers
• Grid Density: Tighter grid pattern (8px vs 12px)
• Animation Duration: Longer animation cycle (150s vs 90s)