Floating Paths Background
Floating Paths Background is a decorative background animation component that creates soft, looping path shapes floating across the screen. It uses SVG and motion-based techniques to add visual interest without overwhelming the content. Ideal for hero sections, landing pages, and minimal UI designs. Built with Tailwind CSS and Framer Motion for smooth performance and responsiveness.
Bundui Components
Installation
Install the following dependencies:
npm i motion clsx tailwind-merge
Add utils file
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
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>
);
}
API
Prop | Type | Default | Description |
---|---|---|---|
position | number | A multiplier used to calculate the offset and curve of each path. | |
children | React.ReactNode | The content that will be rendered above the floating background paths. | |
className | string | undefined | Optional Tailwind/CSS classes for custom styling on the outer container. |