That's it. Your site now has cursor effects.

npm install @caustics/cursor-effects

<script>
  import { CursorEffects } from '@caustics/cursor-effects';
</script>

<CursorEffects preset="dot-trail" />

npm install @caustics/cursor-effects

import { CursorEffects } from '@caustics/cursor-effects/react';
return <CursorEffects preset="dot-trail" />;

npm install @caustics/cursor-effects

import { mount } from '@caustics/cursor-effects';
mount(document.querySelector('#hero'), { preset: 'dot-trail' });

Sensible defaults. Documented types.

Prop

Type

Default

Description

preset

string

"dot-trail"

Named preset. Overrides individual props when set.

colors

string[]

undefined

Override palette. Accepts hex, hsl, or CSS custom properties.

reducedMotion

'pause' | 'static'

'pause'

Behavior when prefers-reduced-motion is active.

class

string

undefined

Additional CSS classes applied to the root element.

A zip. Everything else lives at caustics.dev.

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  Caustics Commercial License
└── package.json

Cursor Effects replaces the default browser cursor with a custom-rendered overlay that follows the real pointer and responds to the page. Four variants ship in the box: a glowing dot-trail with a pooled particle wake, a magnetic ring that eases its center toward interactive elements and morphs to their bounding box, a technical crosshair, and a minimal follower ring.

Motion is driven by a frame-rate-normalised lerp on a single shared requestAnimationFrame loop — the cursor advances a fraction of the remaining distance to the pointer each frame for fluid lag, then the loop idles the instant it settles. A context-aware mode grows and snaps the cursor over any element matching [data-cursor-magnetic] (links and buttons by default). The trail is a pooled set of DOM nodes positioned with GPU-composited translate3d transforms — nothing is allocated per frame, and there is zero layout thrash.

Zero dependencies. Accessibility is built in, not bolted on: on touch and coarse-pointer devices the instrument does nothing (no custom cursor, native behaviour intact), and it respects prefers-reduced-motion — collapsing the lag and trail to a static cursor, or disabling itself entirely. The native cursor is hidden only while the custom cursor is active on a fine pointer, and is always restored on teardown. Ships with Svelte 5, React, vanilla, and zero-config data-cursor auto-init entry points.

That's it. Your site now has cursor effects.

Sensible defaults. Documented types.

A zip. Everything else lives at caustics.dev.

Ready to ship?