react-smokey-fluid-cursor
react-smokey-fluid-cursor

react-smokey-fluid-cursor

WebGL fluid cursor trails as a React & Next.js component. Move your mouse anywhere on this page.

Live controls

Move your pointer anywhere on the page. Everything below retunes the running simulation — nothing is remounted.

runningSpectrum Flow

100 presets

Every palette crossed with every motion character, shipped in the package as presets. 20 palettes × 5 characters.

Showing 100 of 100

Scoped to a section

scoped plus position: "absolute" keeps the effect inside the component's own wrapper. It follows the controls above, so you can compare the same settings at two scales.

Move your pointer in here

Usage

tsx
import { SmokeyFluidCursor, presets } from "react-smokey-fluid-cursor";
export default function Layout({ children }) {  return (    <>      <SmokeyFluidCursor config={presets["Ocean Swirl"]} />      {children}    </>  );}

Imperative control

tsx
const fluid = useRef<FluidHandle>(null);
<SmokeyFluidCursor ref={fluid} config={presets["Magma Storm"]} /><button onClick={() => fluid.current?.pause()}>Pause</button>