Background Paths

1"use client";
2 
3/**
4 * @author: @dorianbaffier
5 * @description: Background Paths
6 * @version: 1.0.0
7 * @date: 2025-06-26
8 * @license: MIT
9 * @website: https://kokonutui.com
10 * @github: https://github.com/kokonut-labs/kokonutui
11 */
12 
13import { motion } from "motion/react";
14import { memo, useMemo } from "react";
15 
16interface Point {
17  x: number;
18  y: number;
19}
20 
21interface PathData {
22  id: string;
23  d: string;
24  opacity: number;
25  width: number;
26  duration: number;
27  delay: number;
28}
29 
30// Path generation function
31function generateAestheticPath(
32  index: number,
33  position: number,
34  type: "primary" | "secondary" | "accent"
35): string {
36  const baseAmplitude =
37    type === "primary" ? 150 : type === "secondary" ? 100 : 60;
38  const phase = index * 0.2;
39  const points: Point[] = [];
40  const segments = type === "primary" ? 10 : type === "secondary" ? 8 : 6;
41 
42  const startX = 2400;
43  const startY = 800;
44  const endX = -2400;
45  const endY = -800 + index * 25;
46 
47  for (let i = 0; i <= segments; i++) {
48    const progress = i / segments;
49    const eased = 1 - (1 - progress) ** 2;
50 
51    const baseX = startX + (endX - startX) * eased;
52    const baseY = startY + (endY - startY) * eased;
53 
54    const amplitudeFactor = 1 - eased * 0.3;
55    const wave1 =
56      Math.sin(progress * Math.PI * 3 + phase) *
57      (baseAmplitude * 0.7 * amplitudeFactor);
58    const wave2 =
59      Math.cos(progress * Math.PI * 4 + phase) *
60      (baseAmplitude * 0.3 * amplitudeFactor);
61    const wave3 =
62      Math.sin(progress * Math.PI * 2 + phase) *
63      (baseAmplitude * 0.2 * amplitudeFactor);
64 
65    points.push({
66      x: baseX * position,
67      y: baseY + wave1 + wave2 + wave3,
68    });
69  }
70 
71  const pathCommands = points.map((point: Point, i: number) => {
72    if (i === 0) return `M ${point.x} ${point.y}`;
73    const prevPoint = points[i - 1];
74    const tension = 0.4;
75    const cp1x = prevPoint.x + (point.x - prevPoint.x) * tension;
76    const cp1y = prevPoint.y;
77    const cp2x = prevPoint.x + (point.x - prevPoint.x) * (1 - tension);
78    const cp2y = point.y;
79    return `C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${point.x} ${point.y}`;
80  });
81 
82  return pathCommands.join(" ");
83}
84 
85const generateUniqueId = (prefix: string): string =>
86  `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
87 
88// Memoized FloatingPaths component
89const FloatingPaths = memo(function FloatingPaths({
90  position,
91}: {
92  position: number;
93}) {
94  // Increased number of paths while maintaining optimization
95// … truncated