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`	-

Floating Paths Background

Bundui Components

Installation

Install the following dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

Usage

Props

On this page