Floating Paths Background
Floating Paths Background is a decorative background animation component that creates soft, looping path shapes floating across the screen.
Bundui Components
import { FloatingPathsBackground } from "@/components/core/backgrounds/floating-paths";
import { Button } from "@/components/ui/button";
export default function FloatingPathsBackgroundExample() {
return (
<FloatingPathsBackground className="flex aspect-16/9 items-center justify-center" position={-1}>
<div className="z-10 space-y-4 text-center lg:space-y-6">
<h4 className="text-2xl font-semibold text-black/80 lg:text-3xl dark:text-white/80">
Bundui Components
</h4>
<Button>Discover Excellence</Button>
</div>
</FloatingPathsBackground>
);
}
Installation
Install the following dependencies:
npm install motion clsx tailwind-merge
Copy and paste the following code into your project:
"use client";
import React from "react";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";
export function FloatingPathsBackground({
position,
children,
className,
}: {
position: number;
className?: string;
children: React.ReactNode;
}) {
const paths = Array.from({ length: 36 }, (_, i) => ({
id: i,
d: `M-${380 - i * 5 * position} -${189 + i * 6}C-${
380 - i * 5 * position
} -${189 + i * 6} -${312 - i * 5 * position} ${216 - i * 6} ${
152 - i * 5 * position
} ${343 - i * 6}C${616 - i * 5 * position} ${470 - i * 6} ${
684 - i * 5 * position
} ${875 - i * 6} ${684 - i * 5 * position} ${875 - i * 6}`,
color: `rgba(15,23,42,${0.1 + i * 0.03})`,
width: 0.5 + i * 0.03,
}));
return (
<div className={cn("w-full relative", className)}>
<div className="absolute inset-0 pointer-events-none">
<svg
className="w-full h-full text-slate-950 dark:text-white"
viewBox="0 0 696 316"
fill="none"
>
{paths.map((path) => (
<motion.path
key={path.id}
d={path.d}
stroke="currentColor"
strokeWidth={path.width}
strokeOpacity={0.1 + path.id * 0.03}
initial={{ pathLength: 0.3, opacity: 0.6 }}
animate={{
pathLength: 1,
opacity: [0.3, 0.6, 0.3],
pathOffset: [0, 1, 0],
}}
transition={{
duration: 20 + Math.random() * 10,
repeat: Number.POSITIVE_INFINITY,
ease: "linear",
}}
/>
))}
</svg>
</div>
{children}
</div>
);
}
Update the import paths to match your project setup.
Usage
import { FloatingPathsBackground } from "@/components/core/backgrounds/floating-paths";
import { Button } from "@/components/ui/button";
export default function FloatingPathsBackgroundExample() {
return (
<FloatingPathsBackground className="flex aspect-16/9 items-center justify-center" position={-1}>
<div className="z-10 space-y-4 text-center lg:space-y-6">
<h4 className="text-2xl font-semibold text-black/80 lg:text-3xl dark:text-white/80">
Bundui Components
</h4>
<Button>Discover Excellence</Button>
</div>
</FloatingPathsBackground>
);
}
Props
Prop | Type | Default |
---|---|---|
className? | string | - |
children | React.ReactNode | - |
position? | number | - |
Fireworks Background
Add animated fireworks to your site background with this festive component. Perfect for celebrations. Built with Tailwind CSS and Framer Motion.
Fluid Particles Background
The Geometric Background component features a modern and sophisticated design, incorporating dynamic geometric shapes like triangles, squares, and polygons. These shapes subtly animate across the screen, adding a unique and engaging element to your website's background. Perfect for tech, creative, and professional websites, the geometric pattern adapts effortlessly to both light and dark themes, creating a sleek and visually striking experience for users.