Backgrounds
webgl
new

Caustics Shader Background

A self-contained WebGL caustics background with cursor effects and an expansive prop surface.

Caustics background

Caustics, shaped in real time.

Move your pointer after enabling the cursor effect.

Customize

Adjust the live preview with the component's public props.

100
33
0
50
50
25
0°
74
0
0
0
50
50

Props

NameTypeDefault
colors

One to eight custom colours; overrides the selected preset.

string[]preset palette
preset

Built-in palette used when colors is omitted.

"smoke" | "caustics" | "ember" | "aurora""caustics"
intensity / contrast

Output strength and tonal separation.

number100 / 25
speed / drift

Animation rate and directional travel.

number33 / 0
zoom / warp

Field scale and distortion.

number50 / 50
grain / seed

Noise texture and deterministic variation.

number74 / 0
rotation / offset

Field orientation and position.

number / object0 / { 0, 0 }
animate / reverse

Playback controls.

booleantrue / false
smoothBlend

Ease palette transitions.

booleanfalse
cursor*

Optional pointer velocity, repel, swirl, or ripple effect.

boolean / optionsoff
className

Optional canvas classes.

string—

Install

Add the component directly to your configured component directory.

terminal
pnpm dlx shadcn@latest add https://awwwardedui.vercel.app
/r/caustics-shader-background.json

Usage

terminal
import { CausticsShaderBackground } from "@/components/ui/caustics-shader-background"

<section className="relative h-96 overflow-hidden bg-black">
  <CausticsShaderBackground preset="caustics" speed={33} grain={74} />
  <div className="relative z-10 p-8 text-white">Your content</div>
</section>

Implementation prompt

A ready-to-use integration brief for a coding agent.

Install and integrate the Caustics Shader Background component from the AwwwardWinning UI shadcn registry.

Use the provided registry command and preserve the component inside the project's configured component directory.

Integration requirements:
- Replace the demo content with content already present in the application.
- Preserve the application's typography, colors, spacing, and border-radius tokens.
- Place the component inside a relative, overflow-hidden hero or feature section, with content layered above the canvas.
- Preserve semantic HTML and keyboard accessibility.
- Do not introduce global styles, fixed IDs, or unnecessary dependencies.
- Do not rebuild unrelated sections of the page.
- Keep the component responsive and respect reduced-motion preferences.
- Confirm the registry component installed successfully before integration.

Registry command:
pnpm dlx shadcn@latest add https://awwwardedui.vercel.app
/r/caustics-shader-background.json

Dependencies

None

Touch

full

Motion

Reduced-motion support