Fiber Flow — React Animated Background
Luminous silk fibers streaming through the dark — a domain-warped fbm ridge field with strands that ebb and flow, pointer parallax and a soft cursor glow. Original vfx-ui design.
Usage
import { FiberFlow, FIBER_FLOW_PRESETS } from "@/components/FiberFlow";
export function FiberHero() {
return (
<div style={{ position: "relative", width: "100%", height: 420 }}>
<FiberFlow {...FIBER_FLOW_PRESETS.classic}
{...{
interactive: true,
speed: 1,
intensity: 1,
scale: 1.6,
strands: 22,
sharp: 6,
from: "#1e1b4b",
to: "#4f46e5",
accent: "#a5b4fc"
}}
/>
</div>
);
}Implementation notes & API
Purpose: dark hero/backdrop of flowing luminous fiber strands (silk-wave family) — an original vfx-ui implementation (value-noise fbm + domain warp + ridge comb), not a port of any third-party code. Mount: full-bleed hero band (100% x 420px+); opaque near-black indigo base — no background needed behind it. Props: speed, intensity, scale (field zoom), strands (fiber density), sharp (edge crispness), from/to/accent (deep/mid/sheen colors). Pointer: interactive is off by default (field stays pinned to center); set interactive to parallax the field toward the cursor with a soft glow pocket — keep off for a calm static backdrop. Guardrails: pointer glow is gated by pActive so the resting render is pointer-independent; text overlays sit fine above (z-index); 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 |