{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "vshaders",
  "homepage": "https://vshaders.com",
  "items": [
    {
      "name": "mesh-gradient",
      "type": "registry:block",
      "title": "Mesh gradient",
      "description": "Four color spots drifting on their own slow orbits, blended as a weighted OKLab sum so the midpoints stay alive. A center swirl and simplex distortion bend the domain into a silky, organic gradient, and a whisper of grain keeps the long ramps from banding.",
      "author": "vshaders (https://vshaders.com)",
      "dependencies": [
        "vgpu@^0.3.1",
        "@vgpu/wgsl@^0.3.1",
        "@vgpu/wgsl-std@^0.3.1",
        "@vshaders/color@^0.2.0"
      ],
      "files": [
        {
          "path": "shaders/mesh-gradient.wgsl",
          "type": "registry:file",
          "target": "shaders/mesh-gradient.wgsl"
        },
        {
          "path": "registry/mesh-gradient.tsx",
          "type": "registry:component",
          "target": "components/mesh-gradient.tsx"
        },
        {
          "path": "lib/run-effect.ts",
          "type": "registry:lib",
          "target": "lib/run-effect.ts"
        },
        {
          "path": "lib/shared-gpu.ts",
          "type": "registry:lib",
          "target": "lib/shared-gpu.ts"
        },
        {
          "path": "wgsl-env.d.ts",
          "type": "registry:file",
          "target": "~/wgsl-env.d.ts"
        }
      ],
      "docs": "The shader imports WGSL modules from npm, resolved by vgpu's loader. In next.config.ts, wire @vgpu/wgsl/loader-webpack for *.wgsl under both turbopack.rules and the webpack() hook, and keep the installed wgsl-env.d.ts at your project root so .wgsl imports typecheck. Loader setup: https://vgpu.sh/docs. Effect gallery and sources: https://vshaders.com. Color params are linear-light RGB, not sRGB hex/255: convert hex through the sRGB transfer function, or use Copy params in the live editor (https://vshaders.com/effects/mesh-gradient) for exact values."
    },
    {
      "name": "metaballs",
      "type": "registry:block",
      "title": "Metaballs",
      "description": "Six droplets on their own slow orbits, one riding the pointer, melted together by a smooth boolean: the classic gooey look, kept deliberately flat. Each droplet carries one color from a palette of up to four, blended in OKLab across the necks — crisp silhouette, pure black outside, no light and no depth.",
      "author": "vshaders (https://vshaders.com)",
      "dependencies": [
        "vgpu@^0.3.1",
        "@vgpu/wgsl@^0.3.1",
        "@vgpu/wgsl-std@^0.3.1",
        "@vshaders/sdf@^0.2.0",
        "@vshaders/color@^0.2.0"
      ],
      "files": [
        {
          "path": "shaders/metaballs.wgsl",
          "type": "registry:file",
          "target": "shaders/metaballs.wgsl"
        },
        {
          "path": "registry/metaballs.tsx",
          "type": "registry:component",
          "target": "components/metaballs.tsx"
        },
        {
          "path": "lib/run-effect.ts",
          "type": "registry:lib",
          "target": "lib/run-effect.ts"
        },
        {
          "path": "lib/shared-gpu.ts",
          "type": "registry:lib",
          "target": "lib/shared-gpu.ts"
        },
        {
          "path": "wgsl-env.d.ts",
          "type": "registry:file",
          "target": "~/wgsl-env.d.ts"
        }
      ],
      "docs": "The shader imports WGSL modules from npm, resolved by vgpu's loader. In next.config.ts, wire @vgpu/wgsl/loader-webpack for *.wgsl under both turbopack.rules and the webpack() hook, and keep the installed wgsl-env.d.ts at your project root so .wgsl imports typecheck. Loader setup: https://vgpu.sh/docs. Effect gallery and sources: https://vshaders.com. Color params are linear-light RGB, not sRGB hex/255: convert hex through the sRGB transfer function, or use Copy params in the live editor (https://vshaders.com/effects/metaballs) for exact values."
    },
    {
      "name": "palette-field",
      "type": "registry:block",
      "title": "Palette field",
      "description": "Layered fBM read as ink on paper: one field steers another, the result is pigment density between a light ground and a deep ink, and one accent bleeds in only along the contours. Ridged veins add the brush texture; paper grain sits over everything.",
      "author": "vshaders (https://vshaders.com)",
      "dependencies": [
        "vgpu@^0.3.1",
        "@vgpu/wgsl@^0.3.1",
        "@vgpu/wgsl-std@^0.3.1",
        "@vshaders/color@^0.2.0"
      ],
      "files": [
        {
          "path": "shaders/palette-field.wgsl",
          "type": "registry:file",
          "target": "shaders/palette-field.wgsl"
        },
        {
          "path": "registry/palette-field.tsx",
          "type": "registry:component",
          "target": "components/palette-field.tsx"
        },
        {
          "path": "lib/run-effect.ts",
          "type": "registry:lib",
          "target": "lib/run-effect.ts"
        },
        {
          "path": "lib/shared-gpu.ts",
          "type": "registry:lib",
          "target": "lib/shared-gpu.ts"
        },
        {
          "path": "wgsl-env.d.ts",
          "type": "registry:file",
          "target": "~/wgsl-env.d.ts"
        }
      ],
      "docs": "The shader imports WGSL modules from npm, resolved by vgpu's loader. In next.config.ts, wire @vgpu/wgsl/loader-webpack for *.wgsl under both turbopack.rules and the webpack() hook, and keep the installed wgsl-env.d.ts at your project root so .wgsl imports typecheck. Loader setup: https://vgpu.sh/docs. Effect gallery and sources: https://vshaders.com. Color params are linear-light RGB, not sRGB hex/255: convert hex through the sRGB transfer function, or use Copy params in the live editor (https://vshaders.com/effects/palette-field) for exact values."
    },
    {
      "name": "flow",
      "type": "registry:block",
      "title": "Flow",
      "description": "Layered fBM with a liquid look: one field steers another, and the pointer stirs the pair. Velocity displaces the warp domain under the cursor, so dragging across the canvas visibly drags the flow.",
      "author": "vshaders (https://vshaders.com)",
      "dependencies": [
        "vgpu@^0.3.1",
        "@vgpu/wgsl@^0.3.1",
        "@vgpu/wgsl-std@^0.3.1",
        "@vshaders/color@^0.2.0"
      ],
      "files": [
        {
          "path": "shaders/flow.wgsl",
          "type": "registry:file",
          "target": "shaders/flow.wgsl"
        },
        {
          "path": "registry/flow.tsx",
          "type": "registry:component",
          "target": "components/flow.tsx"
        },
        {
          "path": "lib/run-effect.ts",
          "type": "registry:lib",
          "target": "lib/run-effect.ts"
        },
        {
          "path": "lib/shared-gpu.ts",
          "type": "registry:lib",
          "target": "lib/shared-gpu.ts"
        },
        {
          "path": "wgsl-env.d.ts",
          "type": "registry:file",
          "target": "~/wgsl-env.d.ts"
        }
      ],
      "docs": "The shader imports WGSL modules from npm, resolved by vgpu's loader. In next.config.ts, wire @vgpu/wgsl/loader-webpack for *.wgsl under both turbopack.rules and the webpack() hook, and keep the installed wgsl-env.d.ts at your project root so .wgsl imports typecheck. Loader setup: https://vgpu.sh/docs. Effect gallery and sources: https://vshaders.com. Color params are linear-light RGB, not sRGB hex/255: convert hex through the sRGB transfer function, or use Copy params in the live editor (https://vshaders.com/effects/flow) for exact values."
    },
    {
      "name": "ripple",
      "type": "registry:block",
      "title": "Ripple",
      "description": "Concentric waves radiating from the pointer, phase driven by time. Move fast and the rings surge; go still and they settle to a calm pulse. An easing curve shapes each crest, and a small chromatic offset between channels makes the front shimmer.",
      "author": "vshaders (https://vshaders.com)",
      "dependencies": [
        "vgpu@^0.3.1",
        "@vgpu/wgsl@^0.3.1",
        "@vgpu/wgsl-std@^0.3.1",
        "@vshaders/ease@^0.2.0"
      ],
      "files": [
        {
          "path": "shaders/ripple.wgsl",
          "type": "registry:file",
          "target": "shaders/ripple.wgsl"
        },
        {
          "path": "registry/ripple.tsx",
          "type": "registry:component",
          "target": "components/ripple.tsx"
        },
        {
          "path": "lib/run-effect.ts",
          "type": "registry:lib",
          "target": "lib/run-effect.ts"
        },
        {
          "path": "lib/shared-gpu.ts",
          "type": "registry:lib",
          "target": "lib/shared-gpu.ts"
        },
        {
          "path": "wgsl-env.d.ts",
          "type": "registry:file",
          "target": "~/wgsl-env.d.ts"
        }
      ],
      "docs": "The shader imports WGSL modules from npm, resolved by vgpu's loader. In next.config.ts, wire @vgpu/wgsl/loader-webpack for *.wgsl under both turbopack.rules and the webpack() hook, and keep the installed wgsl-env.d.ts at your project root so .wgsl imports typecheck. Loader setup: https://vgpu.sh/docs. Effect gallery and sources: https://vshaders.com. ringColor is display-referred sRGB (hex/255); backgroundColor is linear-light. Copy params in the live editor (https://vshaders.com/effects/ripple) hands back exact values."
    },
    {
      "name": "dither",
      "type": "registry:block",
      "title": "Dither",
      "description": "A dither filter over any texture, ported to WGSL from Paper Shaders' image dithering (Apache-2.0, credit paper-design): pixelizing dither grid, gamma-shaped luminance, four patterns (random, 2x2/4x4/8x8 Bayer), up to seven tones, back/front/highlight palette or original colors. Render anything into an offscreen target; this pass prints it.",
      "author": "vshaders (https://vshaders.com)",
      "dependencies": [
        "vgpu@^0.3.1",
        "@vgpu/wgsl@^0.3.1",
        "@vgpu/wgsl-std@^0.3.1",
        "@vshaders/dither@^0.2.0"
      ],
      "files": [
        {
          "path": "shaders/dither/display.wgsl",
          "type": "registry:file",
          "target": "shaders/dither.wgsl"
        },
        {
          "path": "wgsl-env.d.ts",
          "type": "registry:file",
          "target": "~/wgsl-env.d.ts"
        }
      ],
      "docs": "The dither filter is a post-process pass: render your scene into an offscreen vgpu target, then bind that target's color as srcTexture (any linear sampler as srcSampler) and draw this shader to your canvas. Uniforms: resolution, cell, colorSteps, gamma, ditherType (1 random, 2/3/4 Bayer 2x2/4x4/8x8), colorBack/colorFront/colorHighlight, originalColors, inverted. Ported from Paper Shaders (github.com/paper-design/shaders, Apache-2.0). Live demo: https://vshaders.com/effects/dither. Colors (colorBack/colorFront/colorHighlight) are display-referred sRGB (hex/255, no linearization)."
    },
    {
      "name": "fluid",
      "type": "registry:block",
      "title": "Fluid",
      "description": "A real simulation, not a moving texture: velocity and dye fields advected every frame, pressure projection keeping the flow divergence-free, vorticity confinement feeding the swirls. The fluid moves only with the cursor: every pointer event splats raw force and dye into the field, and an idle canvas settles back to the plain background.",
      "author": "vshaders (https://vshaders.com)",
      "dependencies": [
        "vgpu@^0.3.1",
        "@vgpu/wgsl@^0.3.1",
        "@vgpu/wgsl-std@^0.3.1",
        "@vshaders/fluid@^0.2.0",
        "@vshaders/color@^0.2.0"
      ],
      "files": [
        {
          "path": "shaders/fluid/advect.wgsl",
          "type": "registry:file",
          "target": "shaders/fluid/advect.wgsl"
        },
        {
          "path": "shaders/fluid/splat.wgsl",
          "type": "registry:file",
          "target": "shaders/fluid/splat.wgsl"
        },
        {
          "path": "shaders/fluid/curl.wgsl",
          "type": "registry:file",
          "target": "shaders/fluid/curl.wgsl"
        },
        {
          "path": "shaders/fluid/vorticity.wgsl",
          "type": "registry:file",
          "target": "shaders/fluid/vorticity.wgsl"
        },
        {
          "path": "shaders/fluid/divergence.wgsl",
          "type": "registry:file",
          "target": "shaders/fluid/divergence.wgsl"
        },
        {
          "path": "shaders/fluid/clear-pressure.wgsl",
          "type": "registry:file",
          "target": "shaders/fluid/clear-pressure.wgsl"
        },
        {
          "path": "shaders/fluid/jacobi-pressure.wgsl",
          "type": "registry:file",
          "target": "shaders/fluid/jacobi-pressure.wgsl"
        },
        {
          "path": "shaders/fluid/gradient-subtract.wgsl",
          "type": "registry:file",
          "target": "shaders/fluid/gradient-subtract.wgsl"
        },
        {
          "path": "shaders/fluid/display.wgsl",
          "type": "registry:file",
          "target": "shaders/fluid/display.wgsl"
        },
        {
          "path": "lib/fluid-runner.ts",
          "type": "registry:lib",
          "target": "lib/fluid-runner.ts"
        },
        {
          "path": "lib/shared-gpu.ts",
          "type": "registry:lib",
          "target": "lib/shared-gpu.ts"
        },
        {
          "path": "registry/fluid.tsx",
          "type": "registry:component",
          "target": "components/fluid.tsx"
        },
        {
          "path": "wgsl-env.d.ts",
          "type": "registry:file",
          "target": "~/wgsl-env.d.ts"
        }
      ],
      "docs": "The shaders import WGSL modules from npm, resolved by vgpu's loader. In next.config.ts, wire @vgpu/wgsl/loader-webpack for *.wgsl under both turbopack.rules and the webpack() hook, and keep the installed wgsl-env.d.ts at your project root so .wgsl imports typecheck. This item ships its own runner (lib/fluid-runner.ts) instead of lib/run-effect.ts. Loader setup: https://vgpu.sh/docs. Effect gallery and sources: https://vshaders.com. Color params are linear-light RGB, not sRGB hex/255: convert hex through the sRGB transfer function, or use Copy params in the live editor (https://vshaders.com/effects/fluid) for exact values."
    },
    {
      "name": "displacement",
      "type": "registry:block",
      "title": "Displacement",
      "description": "A fine grid of cells shearing an image apart under the cursor - with memory: every tile a fast stroke touches snaps out of place and stays there, sliding home as the per-cell state relaxes. RGB channels fringe on moved tiles, stepped film grain rides only the displaced areas. Works over any texture.",
      "author": "vshaders (https://vshaders.com)",
      "dependencies": [
        "vgpu@^0.3.1",
        "@vgpu/wgsl@^0.3.1",
        "@vgpu/wgsl-std@^0.3.1",
        "@vshaders/ease@^0.2.0",
        "@vshaders/color@^0.2.0"
      ],
      "files": [
        {
          "path": "shaders/displacement/state.wgsl",
          "type": "registry:file",
          "target": "shaders/displacement/state.wgsl"
        },
        {
          "path": "shaders/displacement/unpack.wgsl",
          "type": "registry:file",
          "target": "shaders/displacement/unpack.wgsl"
        },
        {
          "path": "shaders/displacement/display.wgsl",
          "type": "registry:file",
          "target": "shaders/displacement/display.wgsl"
        },
        {
          "path": "registry/displacement.tsx",
          "type": "registry:component",
          "target": "components/displacement.tsx"
        },
        {
          "path": "lib/displacement-runner.ts",
          "type": "registry:lib",
          "target": "lib/displacement-runner.ts"
        },
        {
          "path": "lib/shared-gpu.ts",
          "type": "registry:lib",
          "target": "lib/shared-gpu.ts"
        },
        {
          "path": "wgsl-env.d.ts",
          "type": "registry:file",
          "target": "~/wgsl-env.d.ts"
        }
      ],
      "docs": "The shaders import WGSL modules from npm, resolved by vgpu's loader. In next.config.ts, wire @vgpu/wgsl/loader-webpack for *.wgsl under both turbopack.rules and the webpack() hook, and keep the installed wgsl-env.d.ts at your project root so .wgsl imports typecheck. This item ships its own runner (lib/displacement-runner.ts) instead of lib/run-effect.ts. The background is an image and the gallery's demo image is not included: pass the component's imageUrl prop (or runDisplacement's imageUrl option, or the handle's loadImage) pointing at an asset of your project, or the canvas renders an empty background and warns in development. Loader setup: https://vgpu.sh/docs. Effect gallery and sources: https://vshaders.com."
    },
    {
      "name": "god-rays",
      "type": "registry:block",
      "title": "God rays",
      "description": "Volumetric light shafts from the frame's top-right corner, no march required: noise sampled on the unit direction from the light is constant along every ray, which is exactly a shaft pattern. Two counter-rotating layers shimmer against each other while radial decay fades the beams out.",
      "author": "vshaders (https://vshaders.com)",
      "dependencies": [
        "vgpu@^0.3.1",
        "@vgpu/wgsl@^0.3.1",
        "@vgpu/wgsl-std@^0.3.1",
        "@vshaders/ease@^0.2.0",
        "@vshaders/color@^0.2.0"
      ],
      "files": [
        {
          "path": "shaders/god-rays.wgsl",
          "type": "registry:file",
          "target": "shaders/god-rays.wgsl"
        },
        {
          "path": "registry/god-rays.tsx",
          "type": "registry:component",
          "target": "components/god-rays.tsx"
        },
        {
          "path": "lib/run-effect.ts",
          "type": "registry:lib",
          "target": "lib/run-effect.ts"
        },
        {
          "path": "lib/shared-gpu.ts",
          "type": "registry:lib",
          "target": "lib/shared-gpu.ts"
        },
        {
          "path": "wgsl-env.d.ts",
          "type": "registry:file",
          "target": "~/wgsl-env.d.ts"
        }
      ],
      "docs": "The shader imports WGSL modules from npm, resolved by vgpu's loader. In next.config.ts, wire @vgpu/wgsl/loader-webpack for *.wgsl under both turbopack.rules and the webpack() hook, and keep the installed wgsl-env.d.ts at your project root so .wgsl imports typecheck. Loader setup: https://vgpu.sh/docs. Effect gallery and sources: https://vshaders.com. Color params are linear-light RGB, not sRGB hex/255: convert hex through the sRGB transfer function, or use Copy params in the live editor (https://vshaders.com/effects/god-rays) for exact values."
    },
    {
      "name": "heatmap",
      "type": "registry:block",
      "title": "Heatmap",
      "description": "A glowing gradient of heat flowing through any shape, ported to WGSL from Paper Shaders' heatmap (Apache-2.0, credit paper-design). The filter reads one packed texture (R = lightly blurred shape, G = wide outer blur, B = tight inner blur); the shipped preparer builds that packing from any logo image on the CPU.",
      "author": "vshaders (https://vshaders.com)",
      "dependencies": [
        "vgpu@^0.3.1",
        "@vgpu/wgsl@^0.3.1",
        "@vgpu/wgsl-std@^0.3.1"
      ],
      "files": [
        {
          "path": "shaders/heatmap/display.wgsl",
          "type": "registry:file",
          "target": "shaders/heatmap.wgsl"
        },
        {
          "path": "shaders/heatmap/unpack.wgsl",
          "type": "registry:file",
          "target": "shaders/heatmap-unpack.wgsl"
        },
        {
          "path": "lib/heatmap-prepare.ts",
          "type": "registry:lib",
          "target": "lib/heatmap-prepare.ts"
        },
        {
          "path": "wgsl-env.d.ts",
          "type": "registry:file",
          "target": "~/wgsl-env.d.ts"
        }
      ],
      "docs": "The heatmap is a post-process pass over one packed texture: R holds the lightly blurred shape (dark on white), G a wide outer blur, B a tight inner blur. lib/heatmap-prepare.ts builds that packing from any logo (PNG/JPG/SVG) as ImageData on the CPU. To get it onto the GPU in vgpu (targets take no direct pixel upload), use the shipped shaders/heatmap-unpack.wgsl: write image.data into a storage(gpu, byteLength, \"read\") buffer, bind it as `pixels` on an unpack effect (uniforms: resolution = target size, imageSize = image size), draw that one pass into an offscreen target(), then bind the target as this shader's srcTexture with a linear srcSampler and draw to your canvas. Colors are display-referred sRGB (hex / 255, no linearization). Uniforms: colorBack, color1-4 + colorsCount, contour, innerGlow, outerGlow, angle, noise, speed. Ported from Paper Shaders (github.com/paper-design/shaders, Apache-2.0). The full pattern with code: https://vshaders.com/docs/effects. Live demo: https://vshaders.com/effects/heatmap."
    },
    {
      "name": "undertones",
      "type": "registry:block",
      "title": "Undertones",
      "description": "Light behind ribbed glass: a soft color patch rides the pointer while diagonal ribs smear it into streaked bands, each rib sliding the light by its own hashed offset. Seams darken between ribs and a specular crest shines only where light actually sits behind it.",
      "author": "vshaders (https://vshaders.com)",
      "dependencies": [
        "vgpu@^0.3.1",
        "@vgpu/wgsl@^0.3.1",
        "@vgpu/wgsl-std@^0.3.1",
        "@vshaders/ease@^0.2.0",
        "@vshaders/color@^0.2.0"
      ],
      "files": [
        {
          "path": "shaders/undertones.wgsl",
          "type": "registry:file",
          "target": "shaders/undertones.wgsl"
        },
        {
          "path": "registry/undertones.tsx",
          "type": "registry:component",
          "target": "components/undertones.tsx"
        },
        {
          "path": "lib/run-effect.ts",
          "type": "registry:lib",
          "target": "lib/run-effect.ts"
        },
        {
          "path": "lib/shared-gpu.ts",
          "type": "registry:lib",
          "target": "lib/shared-gpu.ts"
        },
        {
          "path": "wgsl-env.d.ts",
          "type": "registry:file",
          "target": "~/wgsl-env.d.ts"
        }
      ],
      "docs": "The shader imports WGSL modules from npm, resolved by vgpu's loader. In next.config.ts, wire @vgpu/wgsl/loader-webpack for *.wgsl under both turbopack.rules and the webpack() hook, and keep the installed wgsl-env.d.ts at your project root so .wgsl imports typecheck. Loader setup: https://vgpu.sh/docs. Effect gallery and sources: https://vshaders.com. Color params are linear-light RGB, not sRGB hex/255: convert hex through the sRGB transfer function, or use Copy params in the live editor (https://vshaders.com/effects/undertones) for exact values."
    }
  ]
}