{
"name": "stepkit-background-paths",
"type": "registry:component",
"title": "Background paths",
"description": "A flowing path field adapted from KokonutUI with a readable editorial layer and bounded motion.",
"author": "Vladislav Stepanov",
"dependencies": [
"react@19.3.0",
"react-dom@19.3.0"
],
"files": [
{
"path": "components/stepkit/BackgroundPaths.tsx",
"content": "/*\n * Stepkit 0.3.0\n * Copyright (c) 2026 Vladislav Stepanov\n *\n * Original Stepkit portions in this release are licensed under the MIT License. Adapted portions identify their upstream licence and attribution in the copied source and in the entry-specific upstream notice files.\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n *\n *\n * MIT License\n *\n * Copyright (c) 2025 kokonutUI\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\n * SOFTWARE.\n *\n */\n\"use client\";\n\nimport { memo, useId, useMemo, type CSSProperties } from \"react\";\nimport \"./styles.css\";\nimport \"./adapted-showcase.css\";\n\n/**\n * Adapted from KokonutUI Background Paths (MIT).\n * Source: https://raw.githubusercontent.com/kokonut-labs/kokonutui/b1ac155138b089ae7825022182b431da89de89be/components/kokonutui/background-paths.tsx\n * License snapshot: provenance/KOKONUTUI-LICENSE-b1ac155.md\n * Stepkit replaces Motion and Tailwind with scoped SVG/CSS while retaining the flowing path field.\n */\nexport interface BackgroundPathsProps {\n title?: string;\n description?: string;\n paused?: boolean;\n className?: string;\n}\n\ntype PathKind = \"primary\" | \"secondary\" | \"accent\";\ninterface Point { x: number; y: number; }\ninterface PathData { id: string; d: string; opacity: number; width: number; duration: number; delay: number; }\ntype ShowcaseStyle = CSSProperties & Record<`--stepkit-${string}`, string | number>;\n\nfunction generateAestheticPath(index: number, position: number, type: PathKind) {\n const amplitude = type === \"primary\" ? 150 : type === \"secondary\" ? 100 : 60;\n const phase = index * 0.2;\n const segments = type === \"primary\" ? 10 : type === \"secondary\" ? 8 : 6;\n const points: Point[] = [];\n const startX = 2400;\n const startY = 800;\n const endX = -2400;\n const endY = -800 + index * 25;\n\n for (let i = 0; i <= segments; i += 1) {\n const progress = i / segments;\n const eased = 1 - (1 - progress) ** 2;\n const baseX = startX + (endX - startX) * eased;\n const baseY = startY + (endY - startY) * eased;\n const amplitudeFactor = 1 - eased * 0.3;\n const wave =\n Math.sin(progress * Math.PI * 3 + phase) * amplitude * 0.7 * amplitudeFactor +\n Math.cos(progress * Math.PI * 4 + phase) * amplitude * 0.3 * amplitudeFactor +\n Math.sin(progress * Math.PI * 2 + phase) * amplitude * 0.2 * amplitudeFactor;\n points.push({ x: baseX * position, y: baseY + wave });\n }\n\n return points.map((point, pointIndex) => {\n if (pointIndex === 0) return `M ${point.x} ${point.y}`;\n const previous = points[pointIndex - 1];\n const tension = 0.4;\n const cp1x = previous.x + (point.x - previous.x) * tension;\n const cp2x = previous.x + (point.x - previous.x) * (1 - tension);\n return `C ${cp1x} ${previous.y}, ${cp2x} ${point.y}, ${point.x} ${point.y}`;\n }).join(\" \");\n}\n\nconst FloatingPaths = memo(function FloatingPaths({ id, position, paused }: { id: string; position: number; paused: boolean }) {\n const groups = useMemo(() => ({\n primary: Array.from({ length: 12 }, (_, index): PathData => ({ id: `primary-${position}-${index}`, d: generateAestheticPath(index, position, \"primary\"), opacity: 0.15 + index * 0.02, width: 4 + index * 0.3, duration: 8, delay: 0 })),\n secondary: Array.from({ length: 15 }, (_, index): PathData => ({ id: `secondary-${position}-${index}`, d: generateAestheticPath(index, position, \"secondary\"), opacity: 0.12 + index * 0.015, width: 3 + index * 0.25, duration: 6, delay: 0 })),\n accent: Array.from({ length: 10 }, (_, index): PathData => ({ id: `accent-${position}-${index}`, d: generateAestheticPath(index, position, \"accent\"), opacity: 0.08 + index * 0.12, width: 2 + index * 0.2, duration: 5, delay: index * 0.12 })),\n }), [position]);\n\n const pathMarkup = (paths: PathData[], group: PathKind) => paths.map((path) => {\n const style: ShowcaseStyle = {\n opacity: path.opacity,\n \"--stepkit-path-duration\": `${path.duration}s`,\n \"--stepkit-path-delay\": `${path.delay}s`,\n };\n return ;\n });\n\n return (\n \n );\n});\n\nexport function BackgroundPaths({ title = \"Make room for a moving idea\", description = \"Flowing paths add depth without taking attention away from the work.\", paused = false, className = \"\" }: BackgroundPathsProps) {\n const gradientId = `stepkit-background-gradient-${useId().replace(/:/g, \"\")}`;\n return (\n \n