feat: add ShaderBackground component

components/motion/shader-background.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import {
+  ColorPanels,
+  type ColorPanelsProps,
+  Dithering,
+  type DitheringProps,
+  DotGrid,
+  type DotGridProps,
+  DotOrbit,
+  type DotOrbitProps,
+  GodRays,
+  type GodRaysProps,
+  GrainGradient,
+  type GrainGradientProps,
+  Metaballs,
+  type MetaballsProps,
+  MeshGradient,
+  type MeshGradientProps,
+  NeuroNoise,
+  type NeuroNoiseProps,
+  PerlinNoise,
+  type PerlinNoiseProps,
+  PulsingBorder,
+  type PulsingBorderProps,
+  SimplexNoise,
+  type SimplexNoiseProps,
+  SmokeRing,
+  type SmokeRingProps,
+  Spiral,
+  type SpiralProps,
+  StaticMeshGradient,
+  type StaticMeshGradientProps,
+  StaticRadialGradient,
+  type StaticRadialGradientProps,
+  Swirl,
+  type SwirlProps,
+  Voronoi,
+  type VoronoiProps,
+  Warp,
+  type WarpProps,
+  Water,
+  type WaterProps,
+  Waves,
+  type WavesProps,
+} from "@paper-design/shaders-react";
+import { useReducedMotion } from "motion/react";
+import type { ComponentType } from "react";
+import { cn } from "@/lib/utils";
+
+type ShaderVariantProps = {
+  "mesh-gradient": MeshGradientProps;
+  "grain-gradient": GrainGradientProps;
+  "dot-grid": DotGridProps;
+  "dot-orbit": DotOrbitProps;
+  warp: WarpProps;
+  waves: WavesProps;
+  water: WaterProps;
+  voronoi: VoronoiProps;
+  swirl: SwirlProps;
+  "smoke-ring": SmokeRingProps;
+  "static-radial-gradient": StaticRadialGradientProps;
+  "neuro-noise": NeuroNoiseProps;
+  metaballs: MetaballsProps;
+  "god-rays": GodRaysProps;
+  spiral: SpiralProps;
+  dithering: DitheringProps;
+  "pulsing-border": PulsingBorderProps;
+  "color-panels": ColorPanelsProps;
+  "static-mesh-gradient": StaticMeshGradientProps;
+  "simplex-noise": SimplexNoiseProps;
+  "perlin-noise": PerlinNoiseProps;
+};
+
+export type ShaderBackgroundVariant = keyof ShaderVariantProps;
+
+export type ShaderBackgroundProps = {
+  [K in ShaderBackgroundVariant]: { variant: K } & ShaderVariantProps[K];
+}[ShaderBackgroundVariant];
+
+const VARIANT_COMPONENTS: {
+  [K in ShaderBackgroundVariant]: ComponentType<ShaderVariantProps[K]>;
+} = {
+  "mesh-gradient": MeshGradient,
+  "grain-gradient": GrainGradient,
+  "dot-grid": DotGrid,
+  "dot-orbit": DotOrbit,
+  warp: Warp,
+  waves: Waves,
+  water: Water,
+  voronoi: Voronoi,
+  swirl: Swirl,
+  "smoke-ring": SmokeRing,
+  "static-radial-gradient": StaticRadialGradient,
+  "neuro-noise": NeuroNoise,
+  metaballs: Metaballs,
+  "god-rays": GodRays,
+  spiral: Spiral,
+  dithering: Dithering,
+  "pulsing-border": PulsingBorder,
+  "color-panels": ColorPanels,
+  "static-mesh-gradient": StaticMeshGradient,
+  "simplex-noise": SimplexNoise,
+  "perlin-noise": PerlinNoise,
+};
+
+export const SHADER_BACKGROUND_VARIANTS = Object.keys(
+  VARIANT_COMPONENTS,
+) as ShaderBackgroundVariant[];
+
+/**
+ * Not every variant animates (e.g. dot-grid is a static pattern), so `speed`
+ * is only frozen for reduced motion when the variant actually exposes it.
+ */
+export function ShaderBackground({
+  variant,
+  className,
+  ...rest
+}: ShaderBackgroundProps) {
+  const reducedMotion = useReducedMotion();
+  const Shader = VARIANT_COMPONENTS[variant] as ComponentType<
+    Record<string, unknown>
+  >;
+  const props = rest as Record<string, unknown>;
+  const speedProps = reducedMotion && "speed" in props ? { speed: 0 } : {};
+
+  return (
+    <Shader
+      {...props}
+      {...speedProps}
+      className={cn("h-full w-full", className)}
+    />
+  );
+}

components/previews/index.tsx

@@ -190,6 +190,11 @@ export const previews: Record<string, ComponentType> = {
   "motion/range-slider": dynamic(() =>
     import("./motion/range-slider.preview").then((m) => m.RangeSliderPreview),
   ),
+  "motion/shader-background": dynamic(() =>
+    import("./motion/shader-background.preview").then(
+      (m) => m.ShaderBackgroundPreview,
+    ),
+  ),
 };
 
 export function getPreview(category: string, slug: string) {