npm install @caustics/cursor-effects <script> import { CursorEffects } from '@caustics/cursor-effects'; </script> <CursorEffects preset="dot-trail" />
| Prop | Type | Default | Description |
|---|---|---|---|
| preset | string | "dot-trail" | Named preset. Overrides individual props when set. |
| speed | number | 1.0 | Animation speed multiplier. 0 = static. |
| intensity | number | 0.5 | Effect intensity. Range: 0–1. |
| colors | string[] | undefined | Override palette. Accepts hex, hsl, or CSS custom properties. |
| reducedMotion | 'pause' | 'static' | 'static' | Behavior when prefers-reduced-motion is active. |
| class | string | undefined | Additional CSS classes applied to the root element. |
caustics-cursor-effects/ ├── svelte/ CursorEffects.svelte · index.ts · types.ts ├── react/ CursorEffects.tsx · index.ts · types.ts ├── vanilla/ cursor-effects.ts · compiled .js ├── docs/ README.md · API.md · CHANGELOG.md ├── LICENSE.md MIT, commercial use included └── package.json
Cursor Effects replaces the default browser cursor with a custom-rendered element that responds intelligently to the page. Magnetic buttons attract the cursor with CSS spring physics. Glow trails leave a particle wake behind cursor movement.
Uses lerp-smoothed positioning for fluid, professional-feeling cursor movement. Includes a context-aware mode that automatically adjusts the cursor shape when hovering over links, buttons, and images.