Background Paths

​

Overview

​

Installation

npx shadcn@latest add @kokonutui/background-paths

npm install motion

​

Props

​

Usage

​

Basic Usage

import BackgroundPaths from "@/components/kokonutui/background-paths";

export default function Page() {
  return <BackgroundPaths />;
}

​

Custom Title

import BackgroundPaths from "@/components/kokonutui/background-paths";

export default function Page() {
  return <BackgroundPaths title="Welcome to Our Platform" />;
}

​

As a Section Background

import BackgroundPaths from "@/components/kokonutui/background-paths";

export default function HeroSection() {
  return (
    <div className="relative">
      <BackgroundPaths title="" /> {/* Empty title for custom content */}
      
      {/* Your custom content here */}
      <div className="absolute inset-0 z-20 flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-5xl font-bold">Your Custom Hero</h1>
          <p className="text-xl">Add any content you want</p>
        </div>
      </div>
    </div>
  );
}

​

Features

• SVG-Based: Scalable vector graphics for crisp rendering at any size
• Procedural Generation: Paths are mathematically generated for organic curves
• Three Wave Layers: Primary, secondary, and accent waves for depth
• Gradient Colors: Beautiful purple-to-pink-to-blue gradient
• Smooth Animations: Subtle floating motion using Framer Motion
• Dark Mode Support: Adapts colors for light and dark themes
• Optimized Performance: Uses React.memo for efficient re-rendering
• Responsive: Scales beautifully on all screen sizes

​

How It Works

1. Primary Paths (12 paths): Largest amplitude waves with highest opacity
2. Secondary Paths (15 paths): Medium-sized waves with moderate opacity
3. Accent Paths (10 paths): Subtle waves for additional depth

• Uses Bézier curves for smooth, organic shapes
• Has unique wave frequency and amplitude
• Animates vertically with different durations
• Features gradient strokes from purple to pink to blue

​

Path Generation Algorithm

1. Creates points along a curved trajectory
2. Applies multiple sine/cosine waves for organic variation
3. Uses easing functions for natural flow
4. Combines waves with different frequencies for complexity

​

Components Structure

• FloatingPaths: Memoized SVG path renderer
• AnimatedTitle: Memoized title with fade-in animation
• BackgroundPaths: Main container component (default export)

​

Dependencies

• motion (Framer Motion) - For smooth animations
• react - Core React features (memo, useMemo)

​

Customization

// Number of paths per layer
const primaryPaths = Array.from({ length: 12 }, ...)
const secondaryPaths = Array.from({ length: 15 }, ...)
const accentPaths = Array.from({ length: 10 }, ...)

// Wave amplitudes (in baseAmplitude)
type === "primary" ? 150 : type === "secondary" ? 100 : 60

// Animation durations
const duration = type === "primary" ? 25 : type === "secondary" ? 20 : 15

​

Performance Notes

• All paths are memoized with useMemo to avoid recalculation
• Components use React.memo to prevent unnecessary re-renders
• SVG rendering is hardware-accelerated in modern browsers
• Single shared gradient definition reduces DOM nodes

​

Browser Support

• SVG 1.1
• CSS clip-path
• CSS gradients
• Framer Motion animations