@catalystsoftware/ui 1.0.0

package/data/bg-data.tsx

@@ -0,0 +1,901 @@
+export const backgroundData = [
+    {
+        name: "CanvasFractalGrid",
+        value: "canvas-fractal-grid",
+        importPath: "~/components/catalyst-ui",
+        multiImport: "CanvasFractalGrid, ConfigurableCanvasFractalGrid",
+        path: "/components/catalyst-ui/backgrounds/canvas-fractal-grid.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/backgrounds/canvas-fractal-grid.tsx",
+        basicusage: `
+<CanvasFractalGrid />
+
+<CanvasFractalGrid 
+  dotSize={4} // number
+  dotSpacing={20} // number
+  dotOpacity={0.3} // number (0-1)
+  gradientAnimationDuration={20} // number
+  waveIntensity={30} // number
+  waveRadius={200} // number
+  dotColor="rgba(100, 100, 255, 1)" // string
+  glowColor="rgba(100, 100, 255, 1)" // string
+  enableNoise={true} // boolean
+  noiseOpacity={0.03} // number (0-1)
+  enableMouseGlow={true} // boolean
+  initialPerformance="medium" // low | medium | high
+  enableGradient={false} // boolean
+  gradients={[
+    {
+      stops: [
+        { color: "#FFD6A5", position: 0 },
+        { color: "#FFADAD", position: 25 }
+      ],
+      centerX: 50,
+      centerY: 50
+    }
+  ]} // GradientType[]
+/>`,
+        usage: `
+<CanvasFractalGrid 
+  dotSize={4} // number
+  dotSpacing={20} // number
+  dotOpacity={0.3} // number (0-1)
+  gradientAnimationDuration={20} // number
+  waveIntensity={30} // number
+  waveRadius={200} // number
+  dotColor="rgba(100, 100, 255, 1)" // string
+  glowColor="rgba(100, 100, 255, 1)" // string
+  enableNoise={true} // boolean
+  noiseOpacity={0.03} // number (0-1)
+  enableMouseGlow={true} // boolean
+  initialPerformance="medium" // low | medium | high
+  enableGradient={false} // boolean
+  gradients={[
+    {
+      stops: [
+        { color: "#FFD6A5", position: 0 },
+        { color: "#FFADAD", position: 25 }
+      ],
+      centerX: 50,
+      centerY: 50
+    }
+  ]} // GradientType[]
+/>`,
+        premium: true,
+        category: "Backgrounds",
+        tags: ["ui", "components", "background", "canvas", "fractal", "dots", "grid", "gradient", "interactive", "animation"],
+        features: ["Responsive", "TypeScript", "Interactive", "Animated Gradients", "Wave Effects", "Mouse Glow", "Noise Overlay", "Performance Optimization", "Customizable Gradients"],
+        dependencies: ["react", "motion/react", "lucide-react", "~/components/catalyst-ui"],
+        props: {
+            "CanvasFractalGrid": [
+                { name: "dotSize", type: "number", default: "4" },
+                { name: "dotSpacing", type: "number", default: "20" },
+                { name: "dotOpacity", type: "number", default: "0.3" },
+                { name: "gradientAnimationDuration", type: "number", default: "20" },
+                { name: "waveIntensity", type: "number", default: "30" },
+                { name: "waveRadius", type: "number", default: "200" },
+                { name: "dotColor", type: "string", default: "rgba(100, 100, 255, 1)" },
+                { name: "glowColor", type: "string", default: "rgba(100, 100, 255, 1)" },
+                { name: "enableNoise", type: "boolean", default: "true" },
+                { name: "noiseOpacity", type: "number", default: "0.03" },
+                { name: "enableMouseGlow", type: "boolean", default: "true" },
+                { name: "initialPerformance", type: "low | medium | high", default: "medium" },
+                { name: "enableGradient", type: "boolean", default: "false" },
+                { name: "gradients", type: "GradientType[]", default: "defaultGradients" },
+            ],
+        },
+        desc: null,
+        status: "Listed",
+        lastUpdated: "2024-12-02 14:30:00"
+    },
+    {
+        name: "FractalDotGrid",
+        value: "fractal-dot-grid",
+        importPath: "~/components/catalyst-ui",
+        multiImport: "FractalDotGrid, ConfigurableFractalDotGridDemo",
+        path: "/components/catalyst-ui/background/fractal-dot-grid.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/fractal-dot-grid.tsx",
+        basicusage: `
+<FractalDotGrid />
+
+<FractalDotGrid 
+  dotSize={4} // number
+  dotSpacing={20} // number
+  dotOpacity={0.3} // number (0-1)
+  waveIntensity={30} // number
+  waveRadius={200} // number
+  dotColor="rgba(100, 100, 255, 1)" // string
+  glowColor="rgba(100, 100, 255, 1)" // string
+  enableNoise={true} // boolean
+  noiseOpacity={0.03} // number (0-1)
+  enableMouseGlow={true} // boolean
+  initialPerformance="medium" // low | medium | high
+/>`,
+        usage: `
+<FractalDotGrid 
+  dotSize={4} // number
+  dotSpacing={20} // number
+  dotOpacity={0.3} // number (0-1)
+  waveIntensity={30} // number
+  waveRadius={200} // number
+  dotColor="rgba(100, 100, 255, 1)" // string
+  glowColor="rgba(100, 100, 255, 1)" // string
+  enableNoise={true} // boolean
+  noiseOpacity={0.03} // number (0-1)
+  enableMouseGlow={true} // boolean
+  initialPerformance="medium" // low | medium | high
+/>`,
+        premium: true,
+        category: "Background",
+        tags: ["ui", "components", "background", "canvas", "fractal", "dots", "grid", "interactive", "animation", "performance"],
+        features: ["Responsive", "TypeScript", "Interactive", "Wave Effects", "Mouse Glow", "Noise Overlay", "Performance Optimization", "Touch Support", "Customizable"],
+        dependencies: ["react", "motion/react", "lucide-react", "~/components/catalyst-ui"],
+        props: {
+            "FractalDotGrid": [
+                { name: "dotSize", type: "number", default: "4" },
+                { name: "dotSpacing", type: "number", default: "20" },
+                { name: "dotOpacity", type: "number", default: "0.3" },
+                { name: "waveIntensity", type: "number", default: "30" },
+                { name: "waveRadius", type: "number", default: "200" },
+                { name: "dotColor", type: "string", default: "rgba(100, 100, 255, 1)" },
+                { name: "glowColor", type: "string", default: "rgba(100, 100, 255, 1)" },
+                { name: "enableNoise", type: "boolean", default: "true" },
+                { name: "noiseOpacity", type: "number", default: "0.03" },
+                { name: "enableMouseGlow", type: "boolean", default: "true" },
+                { name: "initialPerformance", type: "low | medium | high", default: "medium" },
+            ],
+        },
+        desc: null,
+        status: "Listed",
+        lastUpdated: "2024-12-02 14:30:00"
+    },
+    {
+        name: "dynamic-rain",
+        value: "dynamic-rain",
+        importPath: "~/components/catalyst-ui/background/dynamic-rain",
+        multiImport: null,
+        basicusage: `
+<DottedGlowBackground />
+
+<DottedGlowBackground
+  gap={12}
+  radius={2}
+  opacity={0.6}
+  color="rgba(0,0,0,0.7)"
+  glowColor="rgba(0,170,255,0.85)"
+  speedMin={0.4}
+  speedMax={1.3}
+  speedScale={1}
+  backgroundOpacity={0}
+  className="absolute inset-0"
+/>`,
+        path: "/components/catalyst-ui/background/dynamic-rain.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/dynamic-rain.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["background", "canvas", "animation", "glow"],
+        features: ["Canvas-based", "Animated", "Theme-aware", "High Performance"],
+        dependencies: ["react"],
+        props: {
+            "DottedGlowBackground": [
+                { name: "className", type: "string", default: "null" },
+                { name: "gap", type: "number", default: "12" },
+                { name: "radius", type: "number", default: "2" },
+                { name: "color", type: "string", default: "rgba(0,0,0,0.7)" },
+                { name: "darkColor", type: "string", default: "null" },
+                { name: "glowColor", type: "string", default: "rgba(0,170,255,0.85)" },
+                { name: "darkGlowColor", type: "string", default: "null" },
+                { name: "colorLightVar", type: "string", default: "null" },
+                { name: "colorDarkVar", type: "string", default: "null" },
+                { name: "glowColorLightVar", type: "string", default: "null" },
+                { name: "glowColorDarkVar", type: "string", default: "null" },
+                { name: "opacity", type: "number", default: "0.6" },
+                { name: "backgroundOpacity", type: "number", default: "0" },
+                { name: "speedMin", type: "number", default: "0.4" },
+                { name: "speedMax", type: "number", default: "1.3" },
+                { name: "speedScale", type: "number", default: "1" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Dotted Glow Background",
+        value: "dotted-glow-background",
+        importPath: "~/components/catalyst-ui/background/dotted-glow-background",
+        multiImport: null,
+        basicusage: `
+<DottedGlowBackground />
+
+<DottedGlowBackground
+  gap={12}
+  radius={2}
+  opacity={0.6}
+  color="rgba(0,0,0,0.7)"
+  glowColor="rgba(0,170,255,0.85)"
+  speedMin={0.4}
+  speedMax={1.3}
+  speedScale={1}
+  backgroundOpacity={0}
+  className="absolute inset-0"
+/>`,
+        path: "/components/catalyst-ui/background/dotted-glow-background.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/dotted-glow-background.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["background", "canvas", "animation", "glow"],
+        features: ["Canvas-based", "Animated", "Theme-aware", "High Performance"],
+        dependencies: ["react"],
+        props: {
+            "DottedGlowBackground": [
+                { name: "className", type: "string", default: "null" },
+                { name: "gap", type: "number", default: "12" },
+                { name: "radius", type: "number", default: "2" },
+                { name: "color", type: "string", default: "rgba(0,0,0,0.7)" },
+                { name: "darkColor", type: "string", default: "null" },
+                { name: "glowColor", type: "string", default: "rgba(0,170,255,0.85)" },
+                { name: "darkGlowColor", type: "string", default: "null" },
+                { name: "colorLightVar", type: "string", default: "null" },
+                { name: "colorDarkVar", type: "string", default: "null" },
+                { name: "glowColorLightVar", type: "string", default: "null" },
+                { name: "glowColorDarkVar", type: "string", default: "null" },
+                { name: "opacity", type: "number", default: "0.6" },
+                { name: "backgroundOpacity", type: "number", default: "0" },
+                { name: "speedMin", type: "number", default: "0.4" },
+                { name: "speedMax", type: "number", default: "1.3" },
+                { name: "speedScale", type: "number", default: "1" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Lamp",
+        value: "lamp",
+        importPath: "~/components/catalyst-ui/background/lamp",
+        multiImport: "LampContainer",
+        basicusage: `
+<LampContainer>
+  <motion.h1
+    initial={{ opacity: 0.5, y: 100 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    transition={{ delay: 0.3, duration: 0.8, ease: "easeInOut" }}
+    className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent"
+  >
+    Your Content
+  </motion.h1>
+</LampContainer>`,
+        path: "/components/catalyst-ui/background/lamp.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/lamp.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["animation", "background", "visual"],
+        features: ["Animated", "Visual Effects", "TypeScript", "Full Screen"],
+        dependencies: ["framer-motion", "react"],
+        props: {
+            "LampContainer": [
+                { name: "children", type: "React.ReactNode", default: "required" },
+                { name: "className", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Particles",
+        value: "particles",
+        importPath: "~/components/catalyst-ui/background/particles",
+        multiImport: null,
+        basicusage: `
+<Particles />
+
+<Particles 
+	className=""
+	quantity={100}
+	staticity={50}
+	ease={50}
+	size={0.4}
+	refresh={false}
+	color="#ffffff"
+	vx={0}
+	vy={0}
+/>`,
+        path: "/components/catalyst-ui/background/particles.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/particles.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["backgrounds", "particles", "animated", "canvas", "interactive", "mouse"],
+        features: ["Responsive", "TypeScript", "Accessible", "Canvas Rendering", "Mouse Interaction", "Magnetic Effect", "Customizable Colors", "Velocity Control"],
+        dependencies: ["react"],
+        props: {
+            "Particles": [
+                { name: "className", type: "string", default: "null" },
+                { name: "quantity", type: "number", default: "100" },
+                { name: "staticity", type: "number", default: "50" },
+                { name: "ease", type: "number", default: "50" },
+                { name: "size", type: "number", default: "0.4" },
+                { name: "refresh", type: "boolean", default: "false" },
+                { name: "color", type: "string", default: "#ffffff" },
+                { name: "vx", type: "number", default: "0" },
+                { name: "vy", type: "number", default: "0" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Vortex",
+        value: "vortex",
+        importPath: "~/components/catalyst-ui/background/vortex",
+        multiImport: null,
+        basicusage: `
+<Vortex>
+	<div>Your content here</div>
+</Vortex>
+
+<Vortex 
+	particleCount={700}
+	rangeY={100}
+	baseHue={220}
+	baseSpeed={0.0}
+	rangeSpeed={1.5}
+	baseRadius={1}
+	rangeRadius={2}
+	backgroundColor="#000000"
+	className=""
+	containerClassName=""
+>
+	<div>Your content here</div>
+</Vortex>`,
+        path: "/components/catalyst-ui/background/vortex.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/vortex.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["backgrounds", "vortex", "particles", "animated", "flow", "canvas"],
+        features: ["Responsive", "TypeScript", "Accessible", "Canvas Rendering", "Particle Flow", "Customizable Colors", "Glow Effects"],
+        dependencies: ["react", "simplex-noise", "framer-motion"],
+        props: {
+            "Vortex": [
+                { name: "children", type: "ReactNode", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "containerClassName", type: "string", default: "null" },
+                { name: "particleCount", type: "number", default: "700" },
+                { name: "rangeY", type: "number", default: "100" },
+                { name: "baseHue", type: "number", default: "220" },
+                { name: "baseSpeed", type: "number", default: "0.0" },
+                { name: "rangeSpeed", type: "number", default: "1.5" },
+                { name: "baseRadius", type: "number", default: "1" },
+                { name: "rangeRadius", type: "number", default: "2" },
+                { name: "backgroundColor", type: "string", default: "#000000" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Sparkles Core",
+        value: "sparkles-core",
+        importPath: "~/components/catalyst-ui/background/sparkles",
+        multiImport: null,
+        basicusage: `
+<SparklesCore />
+
+<SparklesCore 
+	id=""
+	className=""
+	background="#0d47a1"
+	particleSize={3}
+	minSize={1}
+	maxSize={3}
+	speed={4}
+	particleColor="#ffffff"
+	particleDensity={120}
+/>`,
+        path: "/components/catalyst-ui/background/sparkles.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/sparkles.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["backgrounds", "sparkles", "particles", "animated", "interactive", "effects"],
+        features: ["Responsive", "TypeScript", "Accessible", "Interactive", "Animated Particles", "Customizable Colors", "Click Effects"],
+        dependencies: ["react", "@tsparticles/react", "@tsparticles/engine", "@tsparticles/slim", "framer-motion"],
+        props: {
+            "SparklesCore": [
+                { name: "id", type: "string", default: "null" },
+                { name: "className", type: "string", default: "null" },
+                { name: "background", type: "string", default: "#0d47a1" },
+                { name: "particleSize", type: "number", default: "null" },
+                { name: "minSize", type: "number", default: "1" },
+                { name: "maxSize", type: "number", default: "3" },
+                { name: "speed", type: "number", default: "4" },
+                { name: "particleColor", type: "string", default: "#ffffff" },
+                { name: "particleDensity", type: "number", default: "120" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Smoke",
+        value: "smoke",
+        importPath: "~/components/catalyst-ui/background/smoke",
+        multiImport: null,
+        basicusage: `
+<Smoke />
+
+<Smoke 
+	density={50}
+	color="#ffffff"
+	opacity={0.5}
+	enableRotation={true}
+	rotation={[0, 0, 0.1]}
+	enableWind={false}
+	windStrength={[0.01, 0.01, 0.01]}
+	enableTurbulence={false}
+	turbulenceStrength={[0.01, 0.01, 0.01]}
+	useSimpleScene={true}
+	className=""
+/>`,
+        path: "/components/catalyst-ui/background/smoke.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/smoke.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["backgrounds", "smoke", "3d", "animated", "particles", "effect"],
+        features: ["Responsive", "TypeScript", "Accessible", "3D Rendering", "Wind Effects", "Turbulence", "Customizable"],
+        dependencies: ["react", "react-smoke", "@react-three/fiber", "three"],
+        props: {
+            "Smoke": [
+                { name: "density", type: "number", default: "50" },
+                { name: "color", type: "string", default: "#ffffff" },
+                { name: "opacity", type: "number", default: "0.5" },
+                { name: "enableRotation", type: "boolean", default: "true" },
+                { name: "rotation", type: "[number, number, number]", default: "[0, 0, 0.1]" },
+                { name: "enableWind", type: "boolean", default: "false" },
+                { name: "windStrength", type: "[number, number, number]", default: "[0.01, 0.01, 0.01]" },
+                { name: "enableTurbulence", type: "boolean", default: "false" },
+                { name: "turbulenceStrength", type: "[number, number, number]", default: "[0.01, 0.01, 0.01]" },
+                { name: "useSimpleScene", type: "boolean", default: "true" },
+                { name: "className", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Retro Grid",
+        value: "retro-grid",
+        importPath: "~/components/catalyst-ui/background/retro-grid",
+        multiImport: null,
+        basicusage: `
+<RetroGrid />
+
+<RetroGrid 
+	angle={65}
+	cellSize={60}
+	opacity={0.5}
+	lightLineColor="gray"
+	darkLineColor="gray"
+	className=""
+/>`,
+        path: "/components/catalyst-ui/background/retro-grid.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/retro-grid.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["backgrounds", "grid", "retro", "cyberpunk", "animated", "3d"],
+        features: ["Responsive", "TypeScript", "Accessible", "Animated", "3D Perspective", "Customizable Colors"],
+        dependencies: ["react"],
+        props: {
+            "RetroGrid": [
+                { name: "angle", type: "number", default: "65" },
+                { name: "cellSize", type: "number", default: "60" },
+                { name: "opacity", type: "number", default: "0.5" },
+                { name: "lightLineColor", type: "string", default: "gray" },
+                { name: "darkLineColor", type: "string", default: "gray" },
+                { name: "className", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Interactive Grid Pattern",
+        value: "interactive-grid-pattern",
+        importPath: "~/components/catalyst-ui/background/interactive-grid-pattern",
+        multiImport: null,
+        basicusage: `
+<InteractiveGridPattern />
+
+<InteractiveGridPattern 
+	width={40}
+	height={40}
+	squares={[24, 24]}
+	className=""
+	squaresClassName=""
+/>`,
+        path: "/components/catalyst-ui/background/interactive-grid-pattern.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/interactive-grid-pattern.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["backgrounds", "grid", "pattern", "interactive", "hover"],
+        features: ["Responsive", "TypeScript", "Accessible", "Interactive", "Hover Effects", "Customizable Grid"],
+        dependencies: ["react"],
+        props: {
+            "InteractiveGridPattern": [
+                { name: "width", type: "number", default: "40" },
+                { name: "height", type: "number", default: "40" },
+                { name: "squares", type: "[number, number]", default: "[24, 24]" },
+                { name: "className", type: "string", default: "null" },
+                { name: "squaresClassName", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Hexagon Background",
+        value: "hexagon-background",
+        importPath: "~/components/catalyst-ui/background/hexagon-background",
+        multiImport: null,
+        basicusage: `
+<HexagonBackground>
+	<div>Your content here</div>
+</HexagonBackground>
+
+<HexagonBackground 
+	hexagonSize={75}
+	hexagonMargin={3}
+	className=""
+	hexagonProps={{ className: "" }}
+>
+	<div>Your content here</div>
+</HexagonBackground>`,
+        path: "/components/catalyst-ui/background/hexagon-background.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/hexagon-background.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["backgrounds", "hexagon", "pattern", "geometric", "interactive"],
+        features: ["Responsive", "TypeScript", "Accessible", "Hover Effects", "Customizable Size", "Dynamic Grid"],
+        dependencies: ["react"],
+        props: {
+            "HexagonBackground": [
+                { name: "hexagonSize", type: "number", default: "75" },
+                { name: "hexagonMargin", type: "number", default: "3" },
+                { name: "className", type: "string", default: "null" },
+                { name: "hexagonProps", type: "React.ComponentProps<'div'>", default: "null" },
+                { name: "children", type: "ReactNode", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: 'Background Gradient',
+        value: 'background-gradient',
+        importPath: '~/components/catalyst-ui/background/background-gradient',
+        multiImport: null,
+        basicusage: `
+<BackgroundGradient>
+  <div>Content</div>
+</BackgroundGradient>
+
+<BackgroundGradient 
+  animate={true}
+  className=""
+  containerClassName=""
+>
+  <div>Content</div>
+</BackgroundGradient>`,
+        path: '/components/catalyst-ui/background/background-gradient.tsx',
+        source: null,
+        usagePath: '/components/catalyst-ui/background/background-gradient.tsx',
+        usage: null,
+        premium: true,
+        category: 'Background',
+        tags: ['background', 'gradient', 'border', 'animation', 'decorative'],
+        features: ['Responsive', 'TypeScript', 'Accessible', 'Animated'],
+        dependencies: ['motion/react', 'react'],
+        props: {
+            BackgroundGradient: [
+                { name: 'children', type: 'React.ReactNode', default: 'null' },
+                { name: 'animate', type: 'boolean', default: 'true' },
+                { name: 'className', type: 'string', default: 'null' },
+                { name: 'containerClassName', type: 'string', default: 'null' },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: 'Orbiting Circles',
+        value: 'orbiting-circles',
+        importPath: '~/components/catalyst-ui/background/orbiting-circles',
+        multiImport: null,
+        basicusage: `
+<OrbitingCircles>
+  <Icon1 />
+  <Icon2 />
+</OrbitingCircles>
+
+<OrbitingCircles 
+  reverse={false}
+  duration={20}
+  delay={0}
+  radius={160}
+  path={true}
+  iconSize={30}
+  speed={1}
+  className=""
+>
+  <Icon1 />
+  <Icon2 />
+</OrbitingCircles>`,
+        path: '/components/catalyst-ui/background/orbiting-circles.tsx',
+        source: null,
+        usagePath: '/components/catalyst-ui/background/orbiting-circles.tsx',
+        usage: null,
+        premium: true,
+        category: 'Background',
+        tags: ['orbiting', 'circles', 'animation', 'background', 'decorative'],
+        features: ['Responsive', 'TypeScript', 'Accessible', 'Animated'],
+        dependencies: ['react'],
+        props: {
+            OrbitingCircles: [
+                { name: 'children', type: 'React.ReactNode', default: 'null' },
+                { name: 'reverse', type: 'boolean', default: 'false' },
+                { name: 'duration', type: 'number', default: '20' },
+                { name: 'delay', type: 'number', default: '0' },
+                { name: 'radius', type: 'number', default: '160' },
+                { name: 'path', type: 'boolean', default: 'true' },
+                { name: 'iconSize', type: 'number', default: '30' },
+                { name: 'speed', type: 'number', default: '1' },
+                { name: 'className', type: 'string', default: 'null' },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Animated Beam",
+        value: "animated-beam",
+        importPath: "~/components/catalyst-ui/background/animated-beam",
+        multiImport: null,
+        basicusage: null,
+        path: "/components/catalyst-ui/background/animated-beam.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/animated-beam.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["animation", "svg", "gradient", "connection", "interactive"],
+        features: ["Dynamic SVG Paths", "Gradient Animations", "Responsive", "Customizable Curvature"],
+        dependencies: ["motion/react", "react"],
+        props: {
+            "AnimatedBeam": [
+                { name: "className", type: "string", default: "null" },
+                { name: "containerRef", type: "RefObject<HTMLElement | null>", default: "null" },
+                { name: "fromRef", type: "RefObject<HTMLElement | null>", default: "null" },
+                { name: "toRef", type: "RefObject<HTMLElement | null>", default: "null" },
+                { name: "curvature", type: "number", default: "0" },
+                { name: "reverse", type: "boolean", default: "false" },
+                { name: "pathColor", type: "string", default: "gray" },
+                { name: "pathWidth", type: "number", default: "2" },
+                { name: "pathOpacity", type: "number", default: "0.2" },
+                { name: "gradientStartColor", type: "string", default: "#ffaa40" },
+                { name: "gradientStopColor", type: "string", default: "#9c40ff" },
+                { name: "delay", type: "number", default: "0" },
+                { name: "duration", type: "number", default: "Math.random() * 3 + 4" },
+                { name: "startXOffset", type: "number", default: "0" },
+                { name: "startYOffset", type: "number", default: "0" },
+                { name: "endXOffset", type: "number", default: "0" },
+                { name: "endYOffset", type: "number", default: "0" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Background Paths",
+        value: "background-paths",
+        importPath: "~/components/catalyst-ui/background/background-paths",
+        multiImport: null,
+        basicusage: `
+<BackgroundPaths>
+    <div>Content</div>
+</BackgroundPaths>
+
+<BackgroundPaths 
+    pathColor="currentColor"
+    pathWidth={2}
+    pathOpacity={0.1}
+    variant="curved"
+    animate={true}
+    className=""
+>
+    <div>Content</div>
+</BackgroundPaths>`,
+        path: "/components/catalyst-ui/background/background-paths.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/background-paths.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["ui", "components", "decorative", "background", "svg", "paths", "animated", "patterns"],
+        features: ["Responsive", "TypeScript", "Accessible", "Animated", "Multiple Variants", "SVG Paths"],
+        dependencies: ["react"],
+        props: {
+            "BackgroundPaths": [
+                { name: "pathColor", type: "string", default: "currentColor" },
+                { name: "pathWidth", type: "number", default: "2" },
+                { name: "pathOpacity", type: "number", default: "0.1" },
+                { name: "variant", type: "curved | zigzag | wavy | diagonal", default: "curved" },
+                { name: "animate", type: "boolean", default: "true" },
+                { name: "children", type: "React.ReactNode", default: "null" },
+                { name: "className", type: "string", default: "null" },
+            ],
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Flickering Grid",
+        value: "flickering-grid",
+        importPath: "~/components/catalyst-ui/background/flickering-grid",
+        multiImport: null,
+        basicusage: `
+<FlickeringGrid />
+
+<FlickeringGrid 
+  squareSize={4}
+  gridGap={6}
+  flickerChance={0.3}
+  color="#6B7280"
+  width={800}
+  height={600}
+  maxOpacity={0.5}
+  className="absolute inset-0"
+/>`,
+        path: "/components/catalyst-ui/background/flickering-grid.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/flickering-grid.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["animation", "canvas", "grid", "background"],
+        features: ["Canvas Animation", "Performance Optimized", "Responsive", "TypeScript"],
+        dependencies: ["react"],
+        props: {
+            "FlickeringGrid": [
+                { name: "className", type: "string", default: "null" },
+                { name: "squareSize", type: "number", default: "4" },
+                { name: "gridGap", type: "number", default: "6" },
+                { name: "flickerChance", type: "number", default: "0.3" },
+                { name: "color", type: "string", default: "rgb(0, 0, 0)" },
+                { name: "width", type: "number", default: "null" },
+                { name: "height", type: "number", default: "null" },
+                { name: "maxOpacity", type: "number", default: "0.3" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Dot Pattern",
+        value: "dot-pattern",
+        importPath: "~/components/catalyst-ui/background/dot-pattern",
+        multiImport: null,
+        basicusage: `
+<DotPattern />
+
+<DotPattern 
+  width={20}
+  height={20}
+  cx={2}
+  cy={2}
+  cr={1.5}
+  glow={true}
+  className="opacity-50"
+/>`,
+        path: "/components/catalyst-ui/background/dot-pattern.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/dot-pattern.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["background", "pattern", "animation", "svg"],
+        features: ["Responsive", "Animated", "Customizable", "TypeScript"],
+        dependencies: ["motion", "react"],
+        props: {
+            "DotPattern": [
+                { name: "className", type: "string", default: "null" },
+                { name: "width", type: "number", default: "16" },
+                { name: "height", type: "number", default: "16" },
+                { name: "x", type: "number", default: "0" },
+                { name: "y", type: "number", default: "0" },
+                { name: "cx", type: "number", default: "1" },
+                { name: "cy", type: "number", default: "1" },
+                { name: "cr", type: "number", default: "1" },
+                { name: "glow", type: "boolean", default: "false" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+    {
+        name: "Dotted Map",
+        value: "dotted-map",
+        importPath: "~/components/catalyst-ui/background/dotted-map",
+        multiImport: null,
+        basicusage: `
+<DottedMap />
+
+<DottedMap 
+  width={200}
+  height={100}
+  markers={markers}
+  markerColor="#FF6900"
+  dotRadius={0.3}
+  stagger={true}
+  className="w-full h-64"
+/>`,
+        path: "/components/catalyst-ui/background/dotted-map.tsx",
+        source: null,
+        usagePath: "/components/catalyst-ui/background/dotted-map.tsx",
+        usage: null,
+        premium: true,
+        category: "Background",
+        tags: ["map", "locations", "markers", "geography"],
+        features: ["Custom Markers", "Responsive", "SVG Based", "TypeScript"],
+        dependencies: ["svg-dotted-map", "react"],
+        props: {
+            "DottedMap": [
+                { name: "className", type: "string", default: "null" },
+                { name: "width", type: "number", default: "150" },
+                { name: "height", type: "number", default: "75" },
+                { name: "mapSamples", type: "number", default: "5000" },
+                { name: "markers", type: "Marker[]", default: "[]" },
+                { name: "markerColor", type: "string", default: "#FF6900" },
+                { name: "dotRadius", type: "number", default: "0.2" },
+                { name: "stagger", type: "boolean", default: "true" }
+            ]
+        },
+        desc: null,
+        status: null,
+        lastUpdated: null
+    },
+];