Chroma Background

Flowing chromatic ribbons with subtle grain, adjustable hue, and gentle pointer distortion.

Liquid color ribbons drift through a dark background with subtle film grain. Moving the pointer gently bends the surrounding color field without moving the container.

Chroma Background is a vgpu-powered React UI component that renders a WGSL shader through WebGPU. It supports reduced motion and provides a fallback for browsers without WebGPU.

Installation

text

Add the chroma-background component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/chroma-background.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

import { ChromaBackground } from "@/components/hangry-ui/shader/chroma-background";

<ChromaBackground speed={0.2} intensity={0.9} hueShift={0} grain={0.035}
  className="grid place-items-center p-12">
  <h2 className="typography-section-title text-white">A little more color.</h2>
</ChromaBackground>

Props

Prop	Type	Default	Description
`speed`	`number`	`0.2`	Nonnegative animation speed. Set 0 to freeze the ambient flow.
`intensity`	`number`	`0.9`	Color brightness, clamped to 0–2.
`hueShift`	`number`	`0`	Color phase offset in degrees.
`grain`	`number`	`0.035`	Static grain strength, clamped to 0–0.2.
`interactive`	`boolean`	`true`	Bend and brighten the color field near the pointer.
`children`	`ReactNode`	—	Content displayed above the shader.
Native div props	`ComponentProps`	—	Classes, styles, IDs, and accessibility attributes.

Dependencies

Motion
vgpu