{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"shader-background","type":"registry:component","title":"Shader Background","description":"Twenty-one GPU shader fills from Paper Design behind one typed variant prop, from mesh and grain gradients to warp, water, voronoi, metaballs, god rays, dithering and noise fields. Animated variants hold still when the visitor prefers reduced motion.","author":"kara <ztzyrant@gmail.com>","dependencies":["@paper-design/shaders-react","clsx","motion","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/shader-background.tsx","type":"registry:component","target":"@components/motion/shader-background.tsx","content":"\"use client\";\n// karaui.kamisama-v0.my.id/components/motion/shader-background\n\nimport {\n  ColorPanels,\n  type ColorPanelsProps,\n  Dithering,\n  type DitheringProps,\n  DotGrid,\n  type DotGridProps,\n  DotOrbit,\n  type DotOrbitProps,\n  GodRays,\n  type GodRaysProps,\n  GrainGradient,\n  type GrainGradientProps,\n  Metaballs,\n  type MetaballsProps,\n  MeshGradient,\n  type MeshGradientProps,\n  NeuroNoise,\n  type NeuroNoiseProps,\n  PerlinNoise,\n  type PerlinNoiseProps,\n  PulsingBorder,\n  type PulsingBorderProps,\n  SimplexNoise,\n  type SimplexNoiseProps,\n  SmokeRing,\n  type SmokeRingProps,\n  Spiral,\n  type SpiralProps,\n  StaticMeshGradient,\n  type StaticMeshGradientProps,\n  StaticRadialGradient,\n  type StaticRadialGradientProps,\n  Swirl,\n  type SwirlProps,\n  Voronoi,\n  type VoronoiProps,\n  Warp,\n  type WarpProps,\n  Water,\n  type WaterProps,\n  Waves,\n  type WavesProps,\n} from \"@paper-design/shaders-react\";\nimport { useReducedMotion } from \"motion/react\";\nimport type { ComponentType } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype ShaderVariantProps = {\n  \"mesh-gradient\": MeshGradientProps;\n  \"grain-gradient\": GrainGradientProps;\n  \"dot-grid\": DotGridProps;\n  \"dot-orbit\": DotOrbitProps;\n  warp: WarpProps;\n  waves: WavesProps;\n  water: WaterProps;\n  voronoi: VoronoiProps;\n  swirl: SwirlProps;\n  \"smoke-ring\": SmokeRingProps;\n  \"static-radial-gradient\": StaticRadialGradientProps;\n  \"neuro-noise\": NeuroNoiseProps;\n  metaballs: MetaballsProps;\n  \"god-rays\": GodRaysProps;\n  spiral: SpiralProps;\n  dithering: DitheringProps;\n  \"pulsing-border\": PulsingBorderProps;\n  \"color-panels\": ColorPanelsProps;\n  \"static-mesh-gradient\": StaticMeshGradientProps;\n  \"simplex-noise\": SimplexNoiseProps;\n  \"perlin-noise\": PerlinNoiseProps;\n};\n\nexport type ShaderBackgroundVariant = keyof ShaderVariantProps;\n\nexport type ShaderBackgroundProps = {\n  [K in ShaderBackgroundVariant]: { variant: K } & ShaderVariantProps[K];\n}[ShaderBackgroundVariant];\n\nconst VARIANT_COMPONENTS: {\n  [K in ShaderBackgroundVariant]: ComponentType<ShaderVariantProps[K]>;\n} = {\n  \"mesh-gradient\": MeshGradient,\n  \"grain-gradient\": GrainGradient,\n  \"dot-grid\": DotGrid,\n  \"dot-orbit\": DotOrbit,\n  warp: Warp,\n  waves: Waves,\n  water: Water,\n  voronoi: Voronoi,\n  swirl: Swirl,\n  \"smoke-ring\": SmokeRing,\n  \"static-radial-gradient\": StaticRadialGradient,\n  \"neuro-noise\": NeuroNoise,\n  metaballs: Metaballs,\n  \"god-rays\": GodRays,\n  spiral: Spiral,\n  dithering: Dithering,\n  \"pulsing-border\": PulsingBorder,\n  \"color-panels\": ColorPanels,\n  \"static-mesh-gradient\": StaticMeshGradient,\n  \"simplex-noise\": SimplexNoise,\n  \"perlin-noise\": PerlinNoise,\n};\n\nexport const SHADER_BACKGROUND_VARIANTS = Object.keys(\n  VARIANT_COMPONENTS,\n) as ShaderBackgroundVariant[];\n\n/**\n * Not every variant animates (e.g. dot-grid is a static pattern), so `speed`\n * is only frozen for reduced motion when the variant actually exposes it.\n */\nexport function ShaderBackground({\n  variant,\n  className,\n  ...rest\n}: ShaderBackgroundProps) {\n  const reducedMotion = useReducedMotion();\n  const Shader = VARIANT_COMPONENTS[variant] as ComponentType<\n    Record<string, unknown>\n  >;\n  const props = rest as Record<string, unknown>;\n  const speedProps = reducedMotion && \"speed\" in props ? { speed: 0 } : {};\n\n  return (\n    <Shader\n      {...props}\n      {...speedProps}\n      className={cn(\"h-full w-full\", className)}\n    />\n  );\n}\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"}]}