Acrylic Shader

v1.0.0

FreeWebGLInteractiveReduced Motion

A self-contained WebGL fluid-gradient background that reacts to pointer and touch with a soft swirl. Four built-in palettes, zero dependencies, no Tailwind required. Degrades to a static gradient without WebGL or under reduced-motion.

Acrylic Shader

Go fullscreen to customize props

Installation

npx vectorvesper add acrylic-shader

Run npx vectorvesper init once first to set up your project.

Usage

Import

import { AcrylicShader } from "@/components/vv/acrylic-shader";

Usage

<AcrylicShader />

Client-only component — disable SSR

This component uses WebGL and must be rendered client-side only.

import dynamic from "next/dynamic";

const AcrylicShader = dynamic(
  () => import("@/components/vv/acrylic-shader").then((m) => m.AcrylicShader),
  { ssr: false }
);

This component respects prefers-reduced-motion and provides a graceful fallback.

Props

AcrylicShader is a self-contained WebGL fluid-gradient background component. It fills its nearest positioned parent and responds to pointer and touch movements with a fluid-like swirl and push warp. Features four premium built-in presets (Midnight Aurora, Jade Forest, Crimson Nova, Frost Wave), zero dependencies, and no Tailwind CSS requirement. It automatically falls back to a static CSS gradient in non-WebGL environments or when the user prefers reduced motion.

<AcrylicShader />

A liquid fluid-gradient canvas that fills its parent container.

Prop	Type	Default	Description
`preset`	`"aurora" \| "emerald" \| "crimson" \| "frost"`	`"crimson"`	A named color palette. Custom color overrides can be applied separately.
`color1`	`[number, number, number]`	`—`	RGB values normalized between 0.0 and 1.0. Overrides the first gradient color of the preset.
`color2`	`[number, number, number]`	`—`	RGB values normalized between 0.0 and 1.0. Overrides the second gradient color of the preset.
`color3`	`[number, number, number]`	`—`	RGB values normalized between 0.0 and 1.0. Overrides the third gradient color of the preset.
`color4`	`[number, number, number]`	`—`	RGB values normalized between 0.0 and 1.0. Overrides the fourth gradient color of the preset.
`speed`	`number`	`1.2`	The global animation speed multiplier for fluid motion.
`sensitivity`	`number`	`0.05`	Pointer warp sensitivity. Determines how strongly the mouse movements disturb the fluid.
`density`	`number`	`3.0`	Density of the fluid ripples. Higher values create more micro-folds in the gradients.
`vignetteStrength`	`number`	`0.6`	Vignette shadow strength (0.0 to 1.0) along the edges of the canvas.
`swirlStrength`	`number`	`2.0`	Strength of the swirl warp distortion centered around the pointer.
`pushStrength`	`number`	`0.08`	Strength of the radial push distortion centered around the pointer.
`flowStrength`	`number`	`0.9`	Background wave flow rate when the pointer is stationary.
`opacity`	`number`	`1.0`	Canvas transparency (0.0 to 1.0) for blending with background content.
`className`	`string`	`—`	Extra CSS class name merged onto the root canvas/fallback element.

Examples

Aurora Background

<AcrylicShader preset="aurora" />

Slow-motion Jade Forest

<AcrylicShader preset="emerald" speed={0.4} flowStrength={0.5} />

Custom Palette Override

<AcrylicShader
  preset="frost"
  color1={[0.1, 0.0, 0.2]}
  color2={[0.0, 0.4, 0.8]}
/>

Fully SSR-safe. In server environments or before hydration, it skips initialising the canvas to prevent hydration mismatch and returns a loading structure or the CSS gradient fallback immediately.

Uses highly optimized GLSL shaders. Resolves canvas dimensions scaled by the device pixel ratio (capped at 2.0 to prevent performance drops on high-density displays).

Automatically honors prefers-reduced-motion: reduce by replacing the active WebGL rendering loop with a beautiful static linear-gradient of the chosen palette.

Source

export { default as AcrylicShader, ACRYLIC_SHADER_PRESETS } from "./AcrylicShader";
export type {
  AcrylicShaderProps,
  AcrylicShaderPreset,
  AcrylicShaderPalette,
} from "./AcrylicShader";

View on GitHub →Report an issue