Phantom Cursor

npx shadcn@latest add https://motion-x.vercel.app/r/v0/phantom-cursor-demo.json

Move your cursor here

Installation

Examples

Ghost Emoji Trail

npx shadcn@latest add https://motion-x.vercel.app/r/v0/phantom-cursor-demo2.json

Move your cursor here

Ghost emojis that follow cursor direction with random floating movement — a playful interactive effect.

Usage

import PhantomCursor from "@/components/motionx/phantom-cursor";

Dot trail

<div className="w-full h-[400px] relative">
  <PhantomCursor
    text="●"
    spacing={60}
    maxPoints={12}
    exitDuration={0.8}
    followMouseDirection={false}
    trailClassName="text-5xl text-primary/60"
  />
</div>

Emoji trail

<div className="w-full h-[400px] relative">
  <PhantomCursor
    text="👻"
    spacing={80}
    maxPoints={8}
    followMouseDirection={true}
    trailClassName="text-4xl drop-shadow-lg"
  />
</div>

Custom text trail

<div className="w-full h-[400px] relative">
  <PhantomCursor
    text="MotionX"
    spacing={120}
    maxPoints={4}
    followMouseDirection={true}
    trailClassName="text-lg font-bold text-primary/40"
  />
</div>

Props

Prop	Type	Default	Description
`text`	`string`	`"●"`	Content rendered at each trail point
`delay`	`number`	`0.01`	Opacity animation delay in seconds
`spacing`	`number`	`100`	Minimum distance (px) between trail points
`followMouseDirection`	`boolean`	`true`	Rotate trail items to match cursor direction
`randomFloat`	`boolean`	`true`	Add random floating movement to trail items
`exitDuration`	`number`	`0.5`	Fade-out duration when trail items disappear
`removalInterval`	`number`	`30`	Interval (ms) for removing stale trail points
`maxPoints`	`number`	`5`	Maximum number of simultaneous trail points
`trailClassName`	`string`	`""`	Custom CSS classes for each trail item

Note: The component requires a parent container with explicit dimensions. It fills 100% of its parent using w-full h-full.