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.

通过 CLI 安装

npm

pnpm

bun

yarn

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

复制并粘贴以下代码：

SmoothCursor.vue

DefaultCursor.vue

Prop 名称	类型	默认值	描述
`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

本页