Falling Pattern

Heroes 905

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 DefaultDemo() {
	return (
		<div className="w-full relative min-h-screen">
			<FallingPattern className="h-screen [mask-image:radial-gradient(ellipse_at_center,transparent,var(--background))]" />
			<div className="absolute inset-0 z-10 flex items-center justify-center">
				<h1 className="font-mono text-7xl font-extrabold tracking-tighter">
					Falling Pattern
				</h1>
			</div>
		</div>
	);
}