[V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { Heatmap } from "@paper-design/shaders-react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { Label } from "@/components/ui/label" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function InteractiveShader() { // Shader parameters state const [speed, setSpeed] = useState(1.45) const [contour, setContour] = useState(0.517) const [angle, setAngle] = useState(0) const [noise, setNoise] = useState(0) const [innerGlow, setInnerGlow] = useState(0.5) const [outerGlow, setOuterGlow] = useState(0.53) const [scale, setScale] = useState(0.75) const [colorBack, setColorBack] = useState("#00000000") const [image, setImage] = useState("https://shaders.paper.design/images/image-filters/0019.webp") // Color palette state const [colors, setColors] = useState(["#11206a", "#1f3ba2", "#2f63e7", "#6bd7ff", "#ffe679", "#ff991e", "#ff4c00"]) // Preset configurations const presets = { original: { speed: 1.45, contour: 0.517, angle: 0, noise: 0, innerGlow: 0.5, outerGlow: 0.53, scale: 0.75, colors: ["#11206a", "#1f3ba2", "#2f63e7", "#6bd7ff", "#ffe679", "#ff991e", "#ff4c00"], }, fire: { speed: 2.1, contour: 0.8, angle: 45, noise: 0.3, innerGlow: 0.8, outerGlow: 0.9, scale: 1.2, colors: ["#000000", "#330000", "#660000", "#cc0000", "#ff3300", "#ff6600", "#ffff00"], }, ocean: { speed: 0.8, contour: 0.3, angle: 180, noise: 0.1, innerGlow: 0.2, outerGlow: 0.4, scale: 0.6, colors: ["#001122", "#003366", "#0066aa", "#0099dd", "#33ccff", "#66ddff", "#99eeff"], }, aurora: { speed: 1.8, contour: 0.6, angle: 90, noise: 0.4, innerGlow: 0.7, outerGlow: 0.8, scale: 0.9, colors: ["#001a33", "#003366", "#006699", "#00cccc", "#33ff99", "#66ff66", "#ccff33"], }, } const applyPreset = (presetName: keyof typeof presets) => { const preset = presets[presetName] setSpeed(preset.speed) setContour(preset.contour) setAngle(preset.angle) setNoise(preset.noise) setInnerGlow(preset.innerGlow) setOuterGlow(preset.outerGlow) setScale(preset.scale) setColors(preset.colors) } const updateColor = (index: number, newColor: string) => { const newColors = [...colors] newColors[index] = newColor setColors(newColors) } const randomizeAll = () => { setSpeed(Math.random() * 3 + 0.1) setContour(Math.random()) setAngle(Math.random() * 360) setNoise(Math.random()) setInnerGlow(Math.random()) setOuterGlow(Math.random()) setScale(Math.random() * 1.5 + 0.3) } return (

Interactive Shader Playground

Experiment with real-time shader parameters and create stunning visual effects

{/* Shader Display */}

Shader Preview

{/* Controls */}

{/* Presets */} Presets

{Object.keys(presets).map((presetName) => ( ))}

{/* Parameter Controls */} Parameters Animation Effects Colors

Speed: {speed.toFixed(2)} setSpeed(value[0])} max={3} min={0.1} step={0.01} />

Angle: {angle.toFixed(0)}° setAngle(value[0])} max={360} min={0} step={1} />

Scale: {scale.toFixed(2)} setScale(value[0])} max={2} min={0.1} step={0.01} />

Contour: {contour.toFixed(3)} setContour(value[0])} max={1} min={0} step={0.001} />

Noise: {noise.toFixed(2)} setNoise(value[0])} max={1} min={0} step={0.01} />

Inner Glow: {innerGlow.toFixed(2)} setInnerGlow(value[0])} max={1} min={0} step={0.01} />

Outer Glow: {outerGlow.toFixed(2)} setOuterGlow(value[0])} max={1} min={0} step={0.01} />

Color Palette

{colors.map((color, index) => (

updateColor(index, e.target.value)} className="w-8 h-8 rounded border cursor-pointer" /> updateColor(index, e.target.value)} className="text-xs font-mono" />

))}

Background Color

setColorBack(e.target.value + "00")} className="w-8 h-8 rounded border cursor-pointer" /> setColorBack(e.target.value)} className="text-xs font-mono" placeholder="#00000000" />

Texture Image URL setImage(e.target.value)} className="text-xs" placeholder="Enter image URL..." />

) } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]typescriptreact:file="components/ui/slider.tsx" "use client" import * as React from "react" import * as SliderPrimitive from "@radix-ui/react-slider" import { cn } from "@/lib/utils" const Slider = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Slider.displayName = SliderPrimitive.Root.displayName export { Slider } [V0_FILE]typescriptreact:file="components/ui/label.tsx" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "@paper-design/shaders-react": "0.0.52" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } }

About

Tags

Share

About

Tags

Share

More from princemirxcle-1218

More Templates Like This

About

Tags

Share

About

Tags

Share

More from princemirxcle-1218

More Templates Like This