An interactive canvas fractal dot grid component to add dynamic visual interest to your UI..
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 <div className="container mx-auto py-8">
92 <div className="grid grid-cols-1 gap-8">
93 <div>
94 <Button
95 variant="outline"
96 size="sm"
97 onClick={copyConfigToClipboard}
98 className="mb-4"
99 >
100 {isCopied ? (
101 <Check className="h-4 w-4 mr-2" />
102 ) : (
103 <Copy className="h-4 w-4 mr-2" />
104 )}
105 {isCopied ? "Copied!" : "Copy Config"}
106 </Button>
107 <div className="overflow-hidden bg-white rounded-lg">
108 <div className="h-[500px] w-full relative">
109 <FractalDotGrid {...config} />
110 </div>
111 </div>
112 </div>
113 <Card className="overflow-hidden bg-gradient-to-b from-primary/5 to-primary/5">
114 <CardHeader>
115 <CardTitle>Configuration</CardTitle>
116 </CardHeader>
117 <CardContent>
118 <Accordion type="single" collapsible className="w-full">
119 <AccordionItem value="dots">
120 <AccordionTrigger>Dots</AccordionTrigger>
121 <AccordionContent>
122 <div className="space-y-4">
123 <div>
124 <Label htmlFor="dotSize">Dot Size</Label>
125 <Slider
126 id="dotSize"
127 min={1}
128 max={10}
129 step={0.5}
130 value={[config.dotSize]}
131 onValueChange={([value]) =>
132 updateConfig("dotSize", value)
133 }
134 />
135 </div>
136 <div>
137 <Label htmlFor="dotSpacing">Dot Spacing</Label>
138 <Slider
139 id="dotSpacing"
140 min={10}
141 max={50}
142 step={1}
143 value={[config.dotSpacing]}
144 onValueChange={([value]) =>
145 updateConfig("dotSpacing", value)
146 }
147 />
148 </div>
149 <div>
150 <Label htmlFor="dotOpacity">Dot Opacity</Label>
151 <Slider
152 id="dotOpacity"
153 min={0}
154 max={1}
155 step={0.1}
156 value={[config.dotOpacity]}
157 onValueChange={([value]) =>
158 updateConfig("dotOpacity", value)
159 }
160 />
161 </div>
162 <div>
163 <Label htmlFor="dotColor">Dot Color</Label>
164 <Input
165 id="dotColor"
166 type="color"
167 value={config.dotColor}
168 onChange={(e) =>
169 updateConfig("dotColor", e.target.value)
170 }
171 className="h-10 px-3 py-2"
172 />
173 </div>
174 </div>
175 </AccordionContent>
176 </AccordionItem>
177 <AccordionItem value="waves">
178 <AccordionTrigger>Waves</AccordionTrigger>
179 <AccordionContent>
180 <div className="space-y-4">
181 <div>
182 <Label htmlFor="waveIntensity">Wave Intensity</Label>
183 <Slider
184 id="waveIntensity"
185 min={0}
186 max={100}
187 step={1}
188 value={[config.waveIntensity]}
189 onValueChange={([value]) =>
190 updateConfig("waveIntensity", value)
191 }
192 />
193 </div>
194 <div>
195 <Label htmlFor="waveRadius">Wave Radius</Label>
196 <Slider
197 id="waveRadius"
198 min={50}
199 max={500}
200 step={10}
201 value={[config.waveRadius]}
202 onValueChange={([value]) =>
203 updateConfig("waveRadius", value)
204 }
205 />
206 </div>
207 </div>
208 </AccordionContent>
209 </AccordionItem>
210 <AccordionItem value="effects">
211 <AccordionTrigger>Effects</AccordionTrigger>
212 <AccordionContent>
213 <div className="space-y-4">
214 <div>
215 <Label htmlFor="glowColor">Glow Color</Label>
216 <Input
217 id="glowColor"
218 type="color"
219 value={config.glowColor}
220 onChange={(e) =>
221 updateConfig("glowColor", e.target.value)
222 }
223 className="h-10 px-3 py-2"
224 />
225 </div>
226 <div className="flex items-center space-x-2">
227 <Switch
228 id="enableNoise"
229 checked={config.enableNoise}
230 onCheckedChange={(checked) =>
231 updateConfig("enableNoise", checked)
232 }
233 />
234 <Label htmlFor="enableNoise">Enable Noise</Label>
235 </div>
236 {config.enableNoise && (
237 <div>
238 <Label htmlFor="noiseOpacity">Noise Opacity</Label>
239 <Slider
240 id="noiseOpacity"
241 min={0}
242 max={0.1}
243 step={0.01}
244 value={[config.noiseOpacity]}
245 onValueChange={([value]) =>
246 updateConfig("noiseOpacity", value)
247 }
248 />
249 </div>
250 )}
251 <div className="flex items-center space-x-2">
252 <Switch
253 id="enableMouseGlow"
254 checked={config.enableMouseGlow}
255 onCheckedChange={(checked) =>
256 updateConfig("enableMouseGlow", checked)
257 }
258 />
259 <Label htmlFor="enableMouseGlow">Enable Mouse Glow</Label>
260 </div>
261 </div>
262 </AccordionContent>
263 </AccordionItem>
264 <AccordionItem value="performance">
265 <AccordionTrigger>Performance</AccordionTrigger>
266 <AccordionContent>
267 <div>
268 <Label htmlFor="initialPerformance">
269 Initial Performance
270 </Label>
271 <Select
272 value={config.initialPerformance}
273 onValueChange={(value) =>
274 updateConfig(
275 "initialPerformance",
276 value as "low" | "medium" | "high"
277 )
278 }
279 >
280 <SelectTrigger id="initialPerformance">
281 <SelectValue />
282 </SelectTrigger>
283 <SelectContent>
284 <SelectItem value="low">Low</SelectItem>
285 <SelectItem value="medium">Medium</SelectItem>
286 <SelectItem value="high">High</SelectItem>
287 </SelectContent>
288 </Select>
289 </div>
290 </AccordionContent>
291 </AccordionItem>
292 </Accordion>
293 </CardContent>
294 </Card>
295 </div>
296 </div>
297 )
298}
299
300export ConfigurableFractalDotGridDemo