Shader Background

Shader Background wraps Paper’s React shaders behind a typed variant prop. It provides canvas effects such as mesh gradients, grain, waves and dot patterns for a decorative layer behind ordinary React content.

Better with your agent

Give your agent taste.

The best way to use Rendyn is through MCP. Let your agent find the right component, compare previews and bring the source into your project.

All components are free. Sign up only to connect MCP.

Connect to MCP for free

Example variantReact Tailwind CSS

Practical React example

Use a restrained mesh gradient behind a product hero. Keep the heading and button in the DOM above the canvas, with a plain CSS background that remains useful when the shader cannot render.

Before you copy and paste

Add ShaderBackground and its cn utility from the Code tab. Install the listed @paper-design/shaders-react and motion dependencies. Match each variant’s props to the installed Paper shader version.

Listed package dependencies: @paper-design/shaders-react, clsx, motion, react, tailwind-merge.

Use the Code tab for the component files and installation instructions, then adapt the imports in this example to your project.

A shader hero with content above the canvas

"use client";

import { ShaderBackground } from "@/components/motion/shader-background";

export function ShaderHero() {
  return (
    <section className="relative isolate overflow-hidden rounded-2xl bg-slate-950 text-white">
      <div aria-hidden="true" className="pointer-events-none absolute inset-0">
        <ShaderBackground
          variant="mesh-gradient"
          colors={["#16213e", "#315b77", "#486c70", "#202947"]}
          distortion={0.6}
          swirl={0.3}
          speed={0.3}
        />
      </div>
      <div className="relative bg-slate-950/50 px-6 py-20">
        <h2 className="text-3xl font-semibold">A calmer place to build</h2>
        <a className="mt-6 inline-block underline" href="#features">Explore features</a>
      </div>
    </section>
  );
}

The section has real height from its content, so the absolute canvas can fill it. The dark base and translucent content layer help preserve contrast; test it across the moving palette.

Customization

variant: This imported wrapper contains 21 variants, including mesh-gradient, grain-gradient, waves, water, dot-grid, static-mesh-gradient and static-radial-gradient. Some are static patterns rather than animations.
Variant-specific props: The mesh example’s colors, distortion, swirl and speed are verified in the imported preview. Other variants have different prop types; do not pass the mesh settings to every shader.
speed / className: Pass speed explicitly for variants that support it. When reduced motion is requested, this wrapper freezes speed only when the prop is present. className defaults to filling the parent.

Integration notes

A shader is a graphics dependency, not a CSS-only gradient. Test GPU cost and rendering on the mobile devices and browsers you support; avoid mounting many animated canvases at once.
Keep text, links and controls outside the canvas. A solid or CSS gradient base is a fallback, but it does not by itself recover from a JavaScript error; use your app’s error boundary if the renderer can throw.
The full preview contains a shader selector; the Compact preview is a smaller presentation. Those previews do not turn variant into a free-form shader editor or supply an image-generation API.

Component source: beUI documentation . These examples describe the version imported into Rendyn. Upstream APIs may have changed; retain the source licence notices when adapting the code.