Docs

Get the code

Open any shader in the gallery and press Code. You get three versions: a React and TypeScript component, plain JavaScript, and the raw GLSL fragment shader. On a shader's own page you can tune colours, speed and shape first, and the code updates to match. Exploring and tuning shaders is open to everyone; to see and copy the code, create a free account or sign in.

If your project uses the shadcn CLI, you can add the React component with one command instead of copying it. Signed in, the React tab of the code panel shows the command for that shader. Its link is personal and works for one hour, so copy a fresh one each time.

npx shadcn@latest add "https://shadeon-chi.vercel.app/r/pointer-glow.json?token=<from the code panel>"

Next.js

1. Save the React TS code as components/shadeon/pointer-glow.tsx, or run the command above.
2. Render it inside a positioned container. The file already starts with "use client", so you can import it from a Server Component.

import { PointerGlow } from "@/components/shadeon/pointer-glow";

export default function Page() {
  return (
    <section className="relative isolate min-h-[100dvh] overflow-hidden">
      <PointerGlow className="absolute inset-0 -z-10" />
      <div className="p-10">
        <h1>Your content</h1>
      </div>
    </section>
  );
}

The canvas fills its parent. isolate on the container and -z-10 on the shader keep it behind your content without affecting the rest of the page.

Vite and React

The same file works in any React 18 or 19 project. Save it as src/components/pointer-glow.tsx. The "use client" line at the top is ignored outside frameworks that use it. Without Tailwind, position it with the style prop.

import { PointerGlow } from "./components/pointer-glow";

export function Hero() {
  return (
    <section style={{ position: "relative", isolation: "isolate", minHeight: "100vh" }}>
      <PointerGlow style={{ position: "absolute", inset: 0, zIndex: -1 }} />
      <h1>Your content</h1>
    </section>
  );
}

Plain HTML

Save the JavaScript version as pointer-glow.js next to your page. It looks for a canvas whose id is the shader id.

<section class="hero">
  <canvas id="pointer-glow"></canvas>
  <h1>Your content</h1>
</section>

<style>
  .hero {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
  }
  #pointer-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
  }
</style>

<script type="module" src="./pointer-glow.js"></script>

The file exports a handle, so another module script can change the shader after it has started.

import { shader } from "./pointer-glow.js";

shader.set({ speed: 2, colors: ["#0c0705", "#ff9a4d", "#fff1c4"] });
shader.pause();
shader.play();
shader.destroy();

Settings

Every shader takes colors, speed, scale, intensity and seed. Some add their own, listed in the props table on the shader's page. In React they are props; in JavaScript they are keys of the settings object and of shader.set().

<PointerGlow
  className="absolute inset-0 -z-10"
  colors={["#04100c", "#35d6a0", "#e6fff5"]}
  speed={0.6}
  scale={1.3}
  seed={42}
  maxDpr={1.5}
  paused={menuOpen}
/>

• colors are hex strings such as #1a2b3c.
• seed picks a different arrangement of the same look.
• paused freezes the animation on the current frame.
• maxDpr caps the pixel ratio. The default is 2.

Performance

• WebGL starts only when the canvas first scrolls into view.
• Rendering stops while the canvas is off screen or the tab is in the background.
• If frames start to drop, the shader lowers its own resolution in steps and raises it again when there is headroom.
• Each shader has a cost rating on its page. For heavy shaders on phones, set maxDpr to 1 or keep the canvas to part of the screen.
• Browsers allow only a limited number of WebGL canvases at once. One or two per page is the right amount.

Accessibility

• The canvas is marked aria-hidden. It is decoration, so screen readers skip it.
• Visitors who ask their system for reduced motion get a single still frame instead of animation.
• Shaders change colour constantly. Put text over them on a solid or semi-opaque layer so it always has enough contrast.

License

The shader code is MIT licensed. You can use it in personal and commercial projects. Keep the license notice that sits at the top of each file. The details are on the license page.