Effects Fancy Stable
SmoothCursor
Physics-based smooth cursor with spring animations and rotation effects
Preview
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>Installation
pnpm add fancy-ui-svelte
import { SmoothCursor } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { SmoothCursor } from 'fancy-ui-svelte';
</script>
<SmoothCursor />Examples
Basic Usage
svelte
<script lang="ts">
import { SmoothCursor } from "$lib/fancy-ui/smooth-cursor";
</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>Props
| Prop | Type | Default | Description |
|---|---|---|---|
springConfig | SpringConfig | {} | Spring physics configuration with damping, stiffness, and mass |
Slots
| Slot | Description |
|---|---|
cursor | Custom cursor element (defaults to arrow SVG) |
Links
Related components
An
AnimatedBeam
Animated SVG beams connecting elements with smooth gradients
Effects Stable
Bo
BorderBeam
Gradient beam that races around a container's border using a CSS offset-path animation, masked so only the border ring is painted, with configurable size, speed, anchor position, and gradient colors
Effects Stable
Co
Confetti
Confetti celebration effect powered by canvas-confetti with button trigger support
Effects Stable