Smooth Cursor

A customizable, physics-based smooth cursor animation component for Vue applications.

This component uses the nuxt-only syntax with the <ClientOnly>. If you are not using Nuxt, you can simply remove it.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/smooth-cursor.json"

Copy and paste the following code

SmoothCursor.vue

DefaultCursor.vue

Prop Name	Type	Default	Description
`cursor`	`Component`	`DefaultCursor`	Custom cursor component to replace the default cursor
`springConfig`	`SpringConfig`	`See below`	Configuration object for the spring animation behavior.

interface springConfig {
  damping: number;
  stiffness: number;
  mass: number;
  restDelta: number;
}

const defaultSpringConfig = {
  damping: 45,
  stiffness: 400,
  mass: 1,
  restDelta: 0.001,
};

Compatible with all modern browsers that support:

When using this component, consider that:

Users navigating via keyboard will not see the custom cursor
You may want to provide alternative visual cues for interactive elements
Some users may have motion sensitivity, so consider providing a way to disable the animation

On This Page