Ribbon Field — React Animated Background
Three Gaussian light ribbons drifting over a dot-matrix grid with bloom cores and film grain — WGSL port of ThreeUI's RibbonField (MIT).
Usage
import { RibbonField, RIBBON_FIELD_PRESETS } from "@/components/RibbonField";
export function RibbonHero() {
return (
<div style={{ position: "relative", width: "100%", height: 420 }}>
<RibbonField {...RIBBON_FIELD_PRESETS.classic}
{...{
interactive: true,
speed: 1,
intensity: 1,
drift: 0,
grain: 1
}}
/>
</div>
);
}Implementation notes & API
Purpose: dark hero/backdrop with three drifting light ribbons on a dot-matrix grid; reads as a high-tech data surface. Mount: wide container (hero band); opaque near-black base — no background needed behind it. Props: speed, intensity (ribbon brightness), drift (-1..1 horizontal sway), grain (micro-noise strength). Pointer: ribbon drift follows the cursor x (the original threeui interaction); interactive={false} pins drift to the prop. Guardrails: the dot grid is pixel-true (component measures its own backing store); keep the canvas unscaled (no CSS transform) or dots blur; WebGPU required with fallback prop.
| Property | Type | Notes / default |
|---|---|---|
interactive | boolean | false in the library; enabled in this preview |
fallback | ReactNode | Shown when the renderer is unavailable |
className / style | string / CSSProperties | Applied to the outer container |