"use client" import React, { useCallback } from "react" import { useAtom } from "jotai" import { Circle, CircleOff, Sliders, Square, Triangle } from "lucide-react" import { motion } from "motion/react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Label } from "@/components/ui/label" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Separator } from "@/components/ui/separator" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import ColorPicker from "../ui/color-picker" import ShaderLensBlur, { configAtom } from "../ui/shader-lens-blur" function ShaderLensBlurDemo() { return (

) } function ShaderBlurConfig() { const [config, setConfig] = useAtom(configAtom) const handleVariationChange = useCallback( (value: string) => { setConfig((prev) => ({ ...prev, variation: parseInt(value) })) }, [setConfig] ) const handleColorChange = useCallback( (key: "color1" | "color2" | "color3" | "color4", value: string) => { setConfig((prev) => ({ ...prev, [key]: value })) }, [setConfig] ) const handleDimensionChange = useCallback( (key: "width" | "height", value: number) => { setConfig((prev) => ({ ...prev, [key]: value })) }, [setConfig] ) const variationIcons = [ { icon: Square, label: "Square" }, { icon: Circle, label: "Solid Circle" }, { icon: CircleOff, label: "Hollow Circle" }, { icon: Triangle, label: "Triangle" }, ] return ( Shader Configuration

Variation

Colors

{(["color1", "color2", "color3", "color4"] as const).map( (color) => (

{color} handleColorChange(color, value) } />

) )}

Options

Enable Hover setConfig((prev) => ({ ...prev, enableHover: checked })) } className="data-[state=checked]:bg-blue-500" />

Invert Mouse setConfig((prev) => ({ ...prev, invertMouse: checked })) } className="data-[state=checked]:bg-blue-500" />

Dimensions

Width {config.width}px

handleDimensionChange("width", value) } className="[&_[role=slider]]:bg-blue-500" />

Height {config.height}px

handleDimensionChange("height", value) } className="[&_[role=slider]]:bg-blue-500" />

) } export ShaderLensBlurDemo

shader-lens-blur

Image Gallery