bg-animated-fractal-dot-grid-demo

1"use client"
2 
3import React, { useState } from "react"
4import { Check, Copy } from "lucide-react"
5 
6import {
7  Accordion,
8  AccordionContent,
9  AccordionItem,
10  AccordionTrigger,
11} from "@/components/ui/accordion"
12import { Button } from "@/components/ui/button"
13import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
14import { Input } from "@/components/ui/input"
15import { Label } from "@/components/ui/label"
16import {
17  Select,
18  SelectContent,
19  SelectItem,
20  SelectTrigger,
21  SelectValue,
22} from "@/components/ui/select"
23import { Slider } from "@/components/ui/slider"
24import { Switch } from "@/components/ui/switch"
25import { useToast } from "@/components/ui/use-toast"
26 
27import { FractalDotGrid } from "../ui/bg-animated-fractal-dot-grid"
28 
29const initialConfig = {
30  dotSize: 5.5,
31  dotSpacing: 13,
32  dotOpacity: 0.7,
33  waveIntensity: 99,
34  waveRadius: 200,
35  dotColor: "rgba(100, 100, 255, 1)",
36  glowColor: "rgba(100, 100, 255, 1)",
37  enableNoise: false,
38  noiseOpacity: 0.03,
39  enableMouseGlow: false,
40  initialPerformance: "medium" as const,
41}
42 
43export function ConfigurableFractalDotGridDemo() {
44  const [config, setConfig] = useState(initialConfig)
45  const [isCopied, setIsCopied] = useState(false)
46  const { toast } = useToast()
47 
48  const updateConfig = (key: string, value: any) => {
49    setConfig((prev) => ({ ...prev, [key]: value }))
50  }
51 
52  const copyConfigToClipboard = () => {
53    const configString = `
54"use client"
55 
56import { FractalDotGrid } from "./fractal-dot-grid"
57 
58export function FractalDotGridExample() {
59  return (
60    <div className="h-screen w-screen relative">
61      <FractalDotGrid
62        dotSize={${config.dotSize}}
63        dotSpacing={${config.dotSpacing}}
64        dotOpacity={${config.dotOpacity}}
65        waveIntensity={${config.waveIntensity}}
66        waveRadius={${config.waveRadius}}
67        dotColor="${config.dotColor}"
68        glowColor="${config.glowColor}"
69        enableNoise={${config.enableNoise}}
70        noiseOpacity={${config.noiseOpacity}}
71        enableMouseGlow={${config.enableMouseGlow}}
72        initialPerformance="${config.initialPerformance}"
73      />
74    </div>
75  )
76}
77`
78 
79    navigator.clipboard.writeText(configString).then(() => {
80      setIsCopied(true)
81      toast({
82        title: "Configuration Copied",
83        description:
84          "The current configuration has been copied to your clipboard.",
85      })
86      setTimeout(() => setIsCopied(false), 2000)
87    })
88  }
89 
90  return (
91// … truncated