canvas-fractal-grid-demo

1"use client"
2 
3import React, { useState } from "react"
4import { Check, Copy, Minus, Plus, Trash2 } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
26import { useToast } from "@/components/ui/use-toast"
27 
28import { CanvasFractalGrid } from "../ui/canvas-fractal-grid"
29 
30type GradientStop = {
31  color: string
32  position: number
33}
34 
35type Gradient = {
36  stops: GradientStop[]
37  centerX: number
38  centerY: number
39}
40 
41const initialConfig = {
42  dotSize: 5,
43  dotSpacing: 25,
44  dotOpacity: 0.8,
45  gradientAnimationDuration: 5,
46  waveIntensity: 40,
47  waveRadius: 250,
48  dotColor: "rgba(100, 200, 255, 0.2)",
49  glowColor: "rgba(100, 200, 255, 1)",
50  enableNoise: true,
51  noiseOpacity: 0.05,
52  enableMouseGlow: false,
53  initialPerformance: "high" as const,
54  gradients: [
55    {
56      stops: [
57        { color: "#3498DB", position: 0 },
58        { color: "#2980B9", position: 25 },
59        { color: "#1ABC9C", position: 50 },
60        { color: "transparent", position: 75 },
61      ],
62      centerX: 30,
63      centerY: 70,
64    },
65    {
66      stops: [
67        { color: "#16A085", position: 0 },
68        { color: "#2980B9", position: 25 },
69        { color: "#3498DB", position: 50 },
70        { color: "transparent", position: 75 },
71      ],
72      centerX: 70,
73      centerY: 30,
74    },
75  ],
76}
77 
78export function ConfigurableCanvasFractalGrid() {
79  const [config, setConfig] = useState(initialConfig)
80  const [isCopied, setIsCopied] = useState(false)
81  const { toast } = useToast()
82 
83  const updateConfig = (key: string, value: any) => {
84    setConfig((prev) => ({ ...prev, [key]: value }))
85  }
86 
87  const updateGradient = (index: number, updatedGradient: Gradient) => {
88    const newGradients = [...config.gradients]
89    newGradients[index] = updatedGradient
90    updateConfig("gradients", newGradients)
91  }
92 
93  const addGradient = () => {
94    const newGradient: Gradient = {
95      stops: [
96        { color: "#000000", position: 0 },
97// … truncated