Smooth Follow Cursor

A custom cursor driven by spring physics: the center dot sticks to the fingertip while the outer ring converges behind it, stretching and deforming along the direction of travel according to cursor speed to produce a "soft-bodied" trailing tail.

Loading preview…

npx shadcn@latest add https://webberui.com/r/smooth-follow-cursor.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Outer ring diametersize

Center dot diameterdotSize

Stretch amountstretch

0.4

Outer ring colorcolor

Dot colordotColor

Difference blendblend

<SmoothFollowCursor />

Installation

npx shadcn@latest add https://webberui.com/r/smooth-follow-cursor.json

Or, once registries are configured in components.json, install it as @webberui/smooth-follow-cursor.

Usage

import { SmoothFollowCursor } from "@/components/ui/smooth-follow-cursor";

<SmoothFollowCursor color="#8b5cf6" blend className="relative h-[340px] w-full">
  {/* your content */}
</SmoothFollowCursor>;

The cursor effect only applies inside this container: the container applies cursor-none to hide the native cursor, which comes back as soon as you leave. Touch devices (pointer: coarse) disable it automatically and keep the native cursor.

Props

Prop	Type	Default	Description
`color`	`string`	`"#6366f1"`	Blob outer ring color
`dotColor`	`string`	`"#6366f1"`	Center dot color
`size`	`number`	`38`	Outer ring diameter (px)
`dotSize`	`number`	`7`	Center dot diameter (px)
`deform`	`boolean`	`true`	Whether to stretch and deform along the direction of travel by speed
`stretch`	`number`	`0.4`	Maximum stretch amount (`0`–`1`)
`blend`	`boolean`	`false`	Inverts and blends colors with `mix-blend-difference`
`children`	`ReactNode`	—	Container content

Accessibility

When the user has "reduce motion" enabled at the system level, the custom cursor is disabled and the native cursor is kept
Touch devices disable it automatically, and overflow-hidden makes sure the outer ring cannot spill out of the container while deforming
The cursor layer is a purely visual overlay carrying aria-hidden and pointer-events-none, so it does not affect interaction with the layer underneath