52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T29a9,"use client" import React, { useState } from "react" import { Check, Copy } from "lucide-react" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { useToast } from "@/components/ui/use-toast" import { FractalDotGrid } from "../ui/bg-animated-fractal-dot-grid" const initialConfig = { dotSize: 5.5, dotSpacing: 13, dotOpacity: 0.7, waveIntensity: 99, waveRadius: 200, dotColor: "rgba(100, 100, 255, 1)", glowColor: "rgba(100, 100, 255, 1)", enableNoise: false, noiseOpacity: 0.03, enableMouseGlow: false, initialPerformance: "medium" as const, } export function ConfigurableFractalDotGridDemo() { const [config, setConfig] = useState(initialConfig) const [isCopied, setIsCopied] = useState(false) const { toast } = useToast() const updateConfig = (key: string, value: any) => { setConfig((prev) => ({ ...prev, [key]: value })) } const copyConfigToClipboard = () => { const configString = ` "use client" import { FractalDotGrid } from "./fractal-dot-grid" export function FractalDotGridExample() { return (

) } ` navigator.clipboard.writeText(configString).then(() => { setIsCopied(true) toast({ title: "Configuration Copied", description: "The current configuration has been copied to your clipboard.", }) setTimeout(() => setIsCopied(false), 2000) }) } return (

Configuration Dots

Dot Size updateConfig("dotSize", value) } />

Dot Spacing updateConfig("dotSpacing", value) } />

Dot Opacity updateConfig("dotOpacity", value) } />

Dot Color updateConfig("dotColor", e.target.value) } className="h-10 px-3 py-2" />

Waves

Wave Intensity updateConfig("waveIntensity", value) } />

Wave Radius updateConfig("waveRadius", value) } />

Effects

Glow Color updateConfig("glowColor", e.target.value) } className="h-10 px-3 py-2" />

updateConfig("enableNoise", checked) } /> Enable Noise

{config.enableNoise && (

Noise Opacity updateConfig("noiseOpacity", value) } />

)}

updateConfig("enableMouseGlow", checked) } /> Enable Mouse Glow

Performance

Initial Performance

) } export default ConfigurableFractalDotGridDemo 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":["bg-animated-fractal-dot-grid"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/example/bg-animated-fractal-dot-grid-demo.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]