Fluid Shader

A flowing, glossy WebGL fluid background with configurable colours, speed and complexity.

Updated Nov 6, 2026Added Mar 6, 2026Changelog

motion

Preview

Installation

pnpm dlx shadcn@latest add @satoriui/fluid-shader

Adds components/satori-ui/fluid-shader.tsx to your project and installs its dependencies.

Usage

app/page.tsx

import FluidShader from "@/components/satori-ui/fluid-shader";
export default function Example() {
  return (
    <FluidShader className="h-[480px] w-full" />
  );
}

Examples

Dark and glossy

Raise elevation to give the surface relief, and glossiness to sharpen the highlight. Set backgroundColor to the colour of the section behind it.

Slow and soft

Lower speed and complexity for a background that moves without asking for attention.

Props

color: Main colour of the flow, as any CSS colour, including a theme variable.
TypestringDefault"#16a5fe"
accentColor: Second colour of the flow, blended with color. It also tints the rim light.
TypestringDefault"#47a6ff"
backgroundColor: Colour the flow fades into at its edges, as any CSS colour. The default matches your theme's page background; set it to the section's colour when it sits on another.
TypestringDefault"var(--background)"
speed: How fast the surface moves. 0 freezes it.
TypenumberDefault0.6
complexity: How much the flow folds into itself. 0 is smooth; above 1 gets busy.
TypenumberDefault0.8
scale: Zoom of the pattern. Higher values show smaller, more frequent waves.
TypenumberDefault2.2
elevation: Depth of the surface relief. 0 is flat; around 1 to 3 catches the light like liquid.
TypenumberDefault0
glossiness: Sharpness of the highlight. Higher values give a smaller, glossier glint.
TypenumberDefault53
className: Classes for the wrapper. Give it a size: the canvas fills it.
Typestring
reducedMotion: "user" follows a surrounding MotionConfig, then the visitor's reduce-motion setting. "always" and "never" force the calm or the full version.
Type"user""always""never"Default"user"

Also takes every <div> prop except color.

Reduced motion

Fluid Shader follows the visitor's “reduce motion” device setting on its own: movement, blur and looping effects stop, and fades stay. Use the Reduced motion button on the preview to see that version. To decide yourself, set the reducedMotion prop on one instance, or wrap a whole section or app in Motion's MotionConfig.

app/page.tsx

// Follows the visitor's device setting (the default, "user")
<FluidShader />
// Always the calm version, or always full motion
<FluidShader reducedMotion="always" />
<FluidShader reducedMotion="never" />
// Or for everything inside, with Motion's MotionConfig
import { MotionConfig } from "motion/react";
<MotionConfig reducedMotion="always">
  <FluidShader />
</MotionConfig>

PreviousShimmer TextText Animations NextSphere ShaderShaders