Components
This RainBackground component is a full-screen animated background built with Next.js, Tailwind CSS, and custom CSS keyframes. It creates a dark, immersive atmosphere using a base gradient from deep gray to black. On top of that, animated rain streaks fall continuously, styled with only two strong accent colors—neon blue and neon purple—to avoid the distraction of rainbow patterns while still adding depth and energy. Subtle glow orbs in the same dual tones float in the background, giving the scene a soft ambient lighting effect. A thin grid overlay with blur and brightness filters adds texture, making the design feel futuristic and polished. Content sits clearly above these layers, enhanced by gentle text glow, making this component ideal for hero sections, landing pages, or dark-themed applications that need a visually engaging but focused background.
Loading preview...
"use client"
import React from "react"
import RainBackground from "@/components/ui/rain-background"
export default function Demo() {
return (
<RainBackground />
)
}