# SmoothCursor

> Physics-based smooth cursor with spring animations and rotation effects.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Effects
- Tags: cursor, animation, spring, physics, interactive
- Docs: https://fancy-ui.rama.app/docs/components/smooth-cursor
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/smooth-cursor

## Import

```svelte
<script lang="ts">
  import { SmoothCursor } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { SmoothCursor } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `springConfig` | `SpringConfig` | `{}` | Spring physics configuration with damping, stiffness, and mass |

## Snippets

| Snippet | Description |
| --- | --- |
| `cursor` | Custom cursor element (defaults to arrow SVG) |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { SmoothCursor } from "fancy-ui-svelte";
</script>

<SmoothCursor />
<div class="flex h-48 items-center justify-center rounded-lg border border-dashed">
	<p class="text-muted-foreground text-sm select-none">Move your cursor around the page</p>
</div>
```