Components
DualToneRainBackground
ChatGPT said:
This Dual-Tone Rain Background component is a visually rich full-screen background built for Next.js. It combines a flowing rain effect with a layered glow pattern, all styled using pure CSS and Tailwind utilities. The design avoids rainbow clutter by sticking to just two complementary colors—a neon blue and a neon purple—that contrast beautifully against the dark gradient backdrop. Subtle animations make the streaks move downward continuously, while softly shifting glow orbs add depth and ambiance. On top of these animated layers, a blurred grid overlay creates extra texture, giving the whole section a futuristic and atmospheric look. The component is lightweight, responsive, and easy to drop into hero sections, landing pages, or dashboards where you want a dynamic yet professional background that stands out without overwhelming the content.
Loading preview...
import DualToneRainBackground from "@/components/ui/dual-tone-rain-background";
export default function DemoOne() {
return <DualToneRainBackground />;
}