Fluid Silk

Aspect-ratio corrected GPU shader simulating liquid silk, flowing chiffon fabric, and metallic ripples with real-time pointer interaction.

Interactive Playground

Move cursor over canvas to interact

Variant

Fluid Speed0.4x

Noise Distortion0.65

Film Grain0.04

Pointer Warp

Anatomy

import { FluidSilk } from "@shavin/fx";

// 1. Theme-bound (Auto adapts to light/dark tokens)
<div className="relative w-full h-80 rounded-[var(--radius-panel)] overflow-hidden">
  <FluidSilk
    speed={0.4}
    distortion={0.65}
    grain={0.04}
    interactive={true}
    className="w-full h-full"
  />
</div>

// 2. Custom 4-Anchor Palette (Sapphire Indigo)
<FluidSilk
  colors={["#2563eb", "#1d4ed8", "#3b82f6", "#0f172a"]}
  speed={0.35}
  distortion={0.7}
/>

Examples

Flowing Silk Banner

Isotropic aspect-ratio corrected fluid silk shader bound to active theme colors.

<div className="relative w-full h-64 rounded-[var(--radius-panel)] overflow-hidden border border-hairline">
  <FluidSilk
    speed={0.35}
    distortion={0.7}
    grain={0.04}
    interactive={true}
    className="w-full h-full"
  />
</div>

Custom 4-Anchor Palette (Sapphire Midnight)

Custom 4-stop silk palette with rich sapphire and deep indigo contrast.

<div className="relative w-full h-64 rounded-[var(--radius-panel)] overflow-hidden border border-hairline">
  <FluidSilk
    colors={["#2563eb", "#1d4ed8", "#3b82f6", "#0f172a"]}
    speed={0.3}
    distortion={0.6}
    grain={0.04}
    interactive={true}
    className="w-full h-full"
  />
</div>

Props Reference

Prop	Type	Default	Description
colors	string[] \| "theme" \| "accent-dark" \| "accent-light" \| { light: string[]; dark: string[] }	"theme"	Array of up to 4 colors, theme preset mode, or dual-mode { light, dark } palette.
speed	number	0.4	Fluid flow time rate multiplier.
distortion	number	0.65	Simplex noise wave displacement amplitude.
grain	number	0.04	Film grain & dither intensity (0.0 to 0.2).
interactive	boolean	true	Enables pointer warp displacement.