SmoothCursor

A physics-based smooth cursor that follows your mouse with spring animations and rotation effects. Move your mouse around to see the effect.

Basic Usage

The SmoothCursor component renders a custom cursor that follows the mouse with spring physics. Simply add the component to your page.

<script>
  import { SmoothCursor } from '$lib/fancy-ui/smooth-cursor';
</script>

<SmoothCursor />

Customize the spring physics to achieve different cursor behaviors.

<SmoothCursor
  springConfig={{ damping: 20, stiffness: 200, mass: 0.5 }} />

Replace the default arrow with a custom cursor using Svelte snippets.

<SmoothCursor>
  {#snippet cursor()}
    <div class="h-4 w-4 rounded-full bg-primary" />
  {/snippet}
</SmoothCursor>

Prop	Type	Default	Description
cursor	Snippet	Arrow SVG	Custom cursor content
springConfig	SpringConfig	{}	Spring physics configuration
class	string	''	Additional CSS classes

Property	Type	Default	Description
damping	number	45	How quickly the animation settles
stiffness	number	400	Controls the spring stiffness
mass	number	1	Virtual mass of the animated object

The native browser cursor is automatically hidden while the component is mounted
The cursor auto-hides when the mouse leaves the viewport
Rotation follows the direction of movement with smoothing
Respects prefers-reduced-motion: when enabled, the cursor snaps directly to the pointer without spring animation or rotation
The component uses will-change: transform for GPU acceleration
Fixed positioning at z-index 9999 ensures cursor is always on top