Shaders, shipped as components.

Animated WebGL backgrounds you install as source. No runtime dependencies, and every parameter exposed as a prop.

Now playing06Tunnel

The collection

9 shaders, more on the way.

Each card is the real component, running live. Hover to play with the cursor effect, or click through to tune every parameter.

Floating Grove

A low-poly island where trees spring up, sway and reseed.

3D low-polyelastic growthsoft shadows

Moon Terrain

A turquoise moon above rolling terrain and wandering lights.

3D terrainmoonlightsimplex noise

Dot Globe

A thousand dots turning in perspective.

Canvas 2Dperspectivepoint sphere

Smoke

Electric smoke that ripples under your cursor.

fbm warpripplespring cursor

Metaballs

Five orbiting blobs that melt into one field.

metaballsOKLabswirl cursor

Mesh Gradient

Soft colour points drifting into one smooth gradient.

mesh gradientOKLabswirl cursor

Waves

Layered sine bands that bend away from your cursor.

sine bandsfbmlens cursor

Mesh Drift

Violet blobs drifting backwards through a warped field.

gaussian blobsfbm warpswirl cursor

Tunnel

Fly through a rainbow tube of spiralling points.

3D pointsfly-throughfog

Plain WebGL1

Hand-written WebGL1, from fullscreen fragment shaders to 3D point clouds. No three.js and no runtime dependencies.

Installs as source

The shadcn CLI copies each shader into components/shaders. Edit the GLSL as much as you like.

Light on battery

Pauses in hidden tabs and offscreen, draws a still frame for reduced motion, and caps DPR at 2.

Cursor-reactive

Push, lens, swirl, ripple or glow under the pointer, with an optional spring follow.

Quick start

One command, then it’s yours.

Every shader is a shadcn registry item. The CLI copies the component, its preset and the shared engine into your project. Override any uniform through props, or open the files and change them.

01InstallAdd a shader with the shadcn CLI. The files land in components/shaders.
02MountDrop it into any positioned container. It fills the box behind your content.
03TuneOverride colours, motion and the cursor effect through props.

pnpm dlx shadcn@latest add https://funshader.com/r/metaballs.json

app/hero.tsx

import { MetaballsShader } from "@/components/shaders/metaballs/metaballs-shader";

export function Hero() {
  return (
    <section className="relative isolate min-h-svh overflow-hidden">
      {/* Fills the nearest positioned parent, behind your content. */}
      <MetaballsShader className="-z-10" />
      <h1>Hello, shader.</h1>
    </section>
  );
}

Tuning with props

<MetaballsShader
  speed={0.6}
  colors={["#010A0A", "#02302E", "#118A7E", "#7FE3C4"]}
  cursor={{ effect: "ripple", strength: 0.5 }}
  vignette={0.5}
/>