Acrylic Shader

v1.0.1

FreeBackgroundsWebGL

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

Pointera11y

Fullscreen to test full viewport

Framer Remix Link

https://framer.link/qzMe7ri

Installation

Step 1. Initialize ProjectOne-time setup

Run once in your project root to configure paths and dependencies:

npx vectorvesper init

Step 2. Add ComponentInstalls source & assets

Downloads and registers the component in your project:

npx vectorvesper add acrylic-shader

Usage

Import

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

Usage

<AcrylicShader />

WebGL — render it on the client only

On Next.js, load it with ssr: false from a Client Component, as below. Vite apps need nothing extra.

"use client";

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

A slow-moving wash of colour, like ink stirred into thick paint. It drifts on its own and parts under the cursor. Fills whatever box you give it and sits behind your content.

<AcrylicShader />

The surface. Fills its container, so give the parent a height.

Prop	Type	Default	Description
`preset`	`"aurora" \| "emerald" \| "crimson" \| "frost"`	`"crimson"`	Named palette. Each sets all four colours at once; any colour prop you pass overrides its entry.
`color1`	`[number, number, number]`	`from the preset`	Darkest of the four colours the wash mixes between, as 0–1 channel values. This one reads as the background.
`color2`	`[number, number, number]`	`from the preset`	Second colour.
`color3`	`[number, number, number]`	`from the preset`	Third colour.
`color4`	`[number, number, number]`	`from the preset`	Fourth colour — usually the brightest accent.
`speed`	`number`	`1.2`	How fast the wash drifts with no pointer involved. 0 holds it still.
`sensitivity`	`number`	`0.05`	How strongly the cursor's movement feeds into the flow. Deliberately small — this is a slow surface, and large values make it thrash.
`pushStrength`	`number`	`0.08`	How far the cursor shoves the paint aside as it passes.
`swirlStrength`	`number`	`2.0`	How much the wash curls around itself rather than flowing straight.
`flowStrength`	`number`	`0.9`	Overall distortion of the gradient. Low values keep it close to a plain gradient; high values smear it.
`density`	`number`	`3.0`	How tightly the colour bands pack together across the surface.
`vignetteStrength`	`number`	`0.6`	Darkening toward the edges. 0 leaves the colour flat to the border.
`opacity`	`number`	`1.0`	Overall opacity of the surface, 0–1.
`className`	`string`	`—`	Applied to the wrapper around the canvas.

Presets

Preset	Description	Key Overrides
`"crimson"`	Deep reds through to a hot pink accent. The default.	—
`"aurora"`	Cool greens and violets on near-black.	—
`"emerald"`	Green and teal, calmer than aurora.	—
`"frost"`	Pale blues and white — the lightest of the four.	—

Examples

Behind a section

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

<section className="relative h-screen">
  <div className="absolute inset-0">
    <AcrylicShader preset="frost" />
  </div>
  <div className="relative z-10">…</div>
</section>

A preset with one colour changedColours are 0–1 per channel, not 0–255 — divide your hex values by 255.

<AcrylicShader
  preset="aurora"
  color4={[0.49, 0.67, 0.71]}
  speed={0.6}
  vignetteStrength={0.2}
/>

Nearly still

<AcrylicShader speed={0.15} swirlStrength={0.6} flowStrength={0.3} sensitivity={0.02} />

The wash drifts continuously and has no reduced-motion state. If that matters for your page, render a still gradient in the same colours when the preference is set.

One full-surface pass on the GPU. It costs the same whatever you set the colours to, so tune freely.

Client component. It opens a GPU drawing context on mount — import it dynamically with ssr: false if your route renders on the server.

Source

/**
 * Acrylic Shader — Vector Vesper
 * https://vectorvesper.dev/components
 *
 * Copyright (c) 2026 Vector Vesper
 * Released under the MIT License. This notice must be retained in copies and
 * substantial portions of the file. https://vectorvesper.dev/license
 */
export { default as AcrylicShader, ACRYLIC_SHADER_PRESETS } from "./AcrylicShader";
export type {
  AcrylicShaderProps,
  AcrylicShaderPreset,
  AcrylicShaderPalette,
} from "./AcrylicShader";

View on GitHub Report an issue