Falling Pattern

Component 194

About

A mesmerizing falling-particles background with customizable colors, blur, and density—perfect for subtle motion effects. Built with Framer Motion for buttery-smooth infinite animation.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Falling Pattern to your project and fits it to your theme.

Code

How Falling Pattern is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FallingPattern } from "@/components/ui/falling-pattern";


export default function CustomColorsDemo() {
	return (
		<div className="w-full relative min-h-screen">
			<FallingPattern
				className="h-screen [mask-image:radial-gradient(ellipse_at_center,transparent,var(--background))]"
				color="#00ff88"
				duration={80}
				blurIntensity="0.5rem"
				density={2}
			/>
			<div className="absolute inset-0 z-10 flex items-center justify-center">
				<h1 className="font-mono text-7xl font-extrabold tracking-tighter">
					Custom Colors
				</h1>
			</div>
		</div>
	);
}