"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 ConfigurableFractalDotGridDemo

bg-animated-fractal-grid

Image Gallery