SplashCursor
splash-cursorEmits colorful splashes and fading trails from pointer movement and clicks.
Usage
Basic usage
Place it in the relative container, drag the pointer to sputter the colored dye, and default to rainbow mode.
<div className="relative h-64 overflow-hidden rounded-xl">
<SplashCursor />
</div>Fixed theme color
rainbow={false} Closes the hue cycle, and the single-color dye defaults to chart-1 token.
<SplashCursor rainbow={false} />Violent tailing
High splatForce + High dissipation retention rate + large radius, swipe quickly to see long tails.
<SplashCursor splatForce={1.8} dissipation={0.97} splatRadius={72} />Light and soft
opacity Darken the content and stack it below the light content to avoid overpowering the content.
<SplashCursor opacity={0.7} splatRadius={48} />When to Use
Use it to add color splashes on pointer movement and burst spots on click in a hero, playful landing page, or full-page layer. This dependency-free Canvas 2D effect uses pointer-events-none, so it does not block interaction. For continuous trails, use Ribbons; for pixel afterglow, use PixelTrail.
Import
import { SplashCursor } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| rainbow | boolean | true | Cycles each splash through the HSV hue wheel; when false, uses color |
| color | string | var(--color-chart-1) | Fixed sputtering color in non-rainbow mode, token must be prefixed with --color-; ignored for rainbow |
| splatRadius | number | 56 | Sputtering radius reference (px), the larger the color spot, the fuller it will be |
| splatForce | number | 1 | Sputtering intensity: the displacement and trailing length of the splash with the pointer speed, recommended 0.5–2 |
| dissipation | number | 0.92 | Spot retention rate (attenuation per second, 0–1), the closer to 1 the more durable it is |
| opacity | number | 1 | Overall opacity (0–1), can be dimmed when stacking content below |
| className | string | — | Additional class name for the root container, which fills a relative parent |
| style | CSSProperties | — | Inline styles forwarded to the root container |
Usage Guidelines
- Note that
dissipationhas "retention rate" semantics (the opposite of the original DENSITY_DISSIPATION): bigger is more durable, not bigger is faster to dissipate. - Non-rainbow mode
coloruses a variable prefixed with--color-for token; this value is ignored when rainbow is enabled. See [[hulian-token-color-var-needs-color-prefix]]. - canvas2d has zero dependency, RSC security, and comes with
pointer-events-none, which does not block layer interaction; the parent must berelativebefore it can be filled withabsolute inset-0. reduced-motion The reduced stage does not sputter.
Related
BorderBeam · ShineBorder · GlareHover · Lens · AnimatedBeam · OrbitingCircles
Playground
<div className="relative h-64 overflow-hidden rounded-xl"
style={{ background: "oklch(0.14 0.02 255)" }}>
<SplashCursor
rainbow={true}
splatRadius={56}
splatForce={1}
dissipation={0.92}
opacity={1}
/>
</div>