GhostCursor
ghost-cursorShows delayed translucent cursor echoes that follow pointer movement.
Usage
Basic usage
GhostCursor is the decorative covering layer of absolute inset-0, just put it into a dark container of relative + overflow-hidden.
<div
className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 285)" }}
>
<GhostCursor />
</div>Custom color and long tail
color changes the main color, trailLength lengthens the tail, and inertia becomes larger and floats more after stopping.
<GhostCursor
color="oklch(0.72 0.2 50)"
trailLength={48}
inertia={0.78}
/>Gather small smoke balls
scale The larger the smoke group, the more it gathers. brightness brightens and turns off the particles to be cleaner.
<GhostCursor
scale={1.6}
grainIntensity={0}
brightness={1.5}
trailLength={20}
/>Diffuse soft light
scale The smaller the smoke ball, the more diffuse it is, and the soft ambient light with the main color of green is obtained.
<GhostCursor
color="oklch(0.78 0.16 175)"
scale={0.7}
inertia={0.6}
brightness={1.3}
/>When to Use
Use it as a full-area smoke trail behind a hero, card, or landing-page section. Choose ImageTrail when pointer movement should emit specific images; GhostCursor is an abstract atmospheric light effect. The component is an absolute inset-0 overlay and reads best inside a relatively positioned dark container.
Import
import { GhostCursor } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| trailLength | number | 32 | Number of historical pointer positions retained; higher values create a longer trail and increase fragment cost linearly, with 16–64 recommended |
| inertia | number | 0.5 | Inertia from 0 to 1; values near 1 drift farther, while values near 0 track the pointer closely |
| grainIntensity | number | 0.05 | Film-grain intensity from 0 to 0.3; 0 disables grain |
| brightness | number | 1.2 | Overall brightness multiplier; 0.8–2.0 is recommended |
| color | string | var(--color-chart-1) | Main smoke color; accepts any CSS color and defaults to a theme-aware token |
| scale | number | 1 | Positive noise-radius factor; higher values spread the smoke and lower values concentrate it |
| mixBlendMode | CSSProperties["mixBlendMode"] | "screen" | Canvas blend mode; screen creates light on dark backgrounds, while multiply or normal may suit light surfaces |
| className | string | — | Additional class name for the absolute inset-0 root |
| style | CSSProperties | — | Inline styles forwarded to the root, such as zIndex |
Usage Guidelines
- If cleanup calls
loseContextduring React StrictMode remounting, reusing the canvas can leave it blank. Mount a fresh canvas each time; see [[webgl-canvas-loseContext-poisons-strictmode-remount]]. - The parent container must be
relative+overflow-hidden+ dark background (default screen blending mode is almost invisible on light background). - WebGL renders only on the client; under reduced motion, the component uses its static fallback.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 285)" }}>
<GhostCursor
trailLength={32}
inertia={0.5}
brightness={1.2}
grainIntensity={0.05}
scale={1}
/>
</div>