Rain Background

Installation

Usage

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

Features

• Animated Rain Streaks: Vertical neon streaks that flow downward
• Glow Orbs: Subtle background glow effects in complementary colors
• Grid Overlay: Subtle grid pattern with backdrop blur effects
• Neon Colors: Blue and purple neon aesthetic
• Pure CSS: No JavaScript dependencies, uses CSS animations
• Performance: Optimized with CSS transforms and animations

Customization

The component uses CSS custom properties that can be customized:

.rain-container {
  --c1: #5a4fff; /* neon blue */
  --c2: #9d4edd; /* neon purple */
}

You can override these colors by targeting the component:

.your-custom-class .rain-container {
  --c1: #00ff88; /* custom green */
  --c2: #ff0088; /* custom pink */
}