50: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"] 51: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"] 52:T4e27,"use client" import React, { useState } from "react" import { Check, Copy, Minus, Plus, Trash2 } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { useToast } from "@/components/ui/use-toast" import { CanvasFractalGrid } from "../ui/canvas-fractal-grid" type GradientStop = { color: string position: number } type Gradient = { stops: GradientStop[] centerX: number centerY: number } const initialConfig = { dotSize: 5, dotSpacing: 25, dotOpacity: 0.8, gradientAnimationDuration: 5, waveIntensity: 40, waveRadius: 250, dotColor: "rgba(100, 200, 255, 0.2)", glowColor: "rgba(100, 200, 255, 1)", enableNoise: true, noiseOpacity: 0.05, enableMouseGlow: false, initialPerformance: "high" as const, gradients: [ { stops: [ { color: "#3498DB", position: 0 }, { color: "#2980B9", position: 25 }, { color: "#1ABC9C", position: 50 }, { color: "transparent", position: 75 }, ], centerX: 30, centerY: 70, }, { stops: [ { color: "#16A085", position: 0 }, { color: "#2980B9", position: 25 }, { color: "#3498DB", position: 50 }, { color: "transparent", position: 75 }, ], centerX: 70, centerY: 30, }, ], } export function ConfigurableCanvasFractalGrid() { 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 updateGradient = (index: number, updatedGradient: Gradient) => { const newGradients = [...config.gradients] newGradients[index] = updatedGradient updateConfig("gradients", newGradients) } const addGradient = () => { const newGradient: Gradient = { stops: [ { color: "#000000", position: 0 }, { color: "#FFFFFF", position: 100 }, ], centerX: 50, centerY: 50, } updateConfig("gradients", [...config.gradients, newGradient]) } const removeGradient = (index: number) => { const newGradients = config.gradients.filter((_, i) => i !== index) updateConfig("gradients", newGradients) } const copyConfigToClipboard = () => { const configString = ` "use client" import { CanvasFractalGrid } from "../ui/canvas-fractal-grid" export function CanvasFractalGridExample() { 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 (

Configurable CanvasFractalGrid

Configuration General Gradients 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

Gradient Animation Duration updateConfig("gradientAnimationDuration", value) } />

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

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

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

Performance

Initial Performance

{config.gradients.map((gradient, index) => ( Gradient {index + 1}

Center X updateGradient(index, { ...gradient, centerX: value, }) } />

Center Y updateGradient(index, { ...gradient, centerY: value, }) } />

{gradient.stops.map((stop, stopIndex) => (

{ const newStops = [...gradient.stops] newStops[stopIndex] = { ...stop, color: e.target.value, } updateGradient(index, { ...gradient, stops: newStops, }) }} className="h-10 w-16" /> { const newStops = [...gradient.stops] newStops[stopIndex] = { ...stop, position: value, } updateGradient(index, { ...gradient, stops: newStops, }) }} className="flex-grow" />

))}

) } export default ConfigurableCanvasFractalGrid 4f:["$","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,["$","$L50",null,{"namespace":"@cult-ui","registryDependencies":["canvas-fractal-grid"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/example/canvas-fractal-grid-demo.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]