Charcoal UI

React Cursor Effects

React cursor effects: trails, blobs, spotlights, labels and magnetic targets.

About these cursor effects

Cursor effects make a page feel responsive to the hand: trails and blobs that follow the pointer, spotlights that reveal content, labels that describe what you are over, image trails and target cursors that snap to buttons.

They only react to a mouse or trackpad, never hide the real cursor unless you ask them to, and do nothing on touch screens.

Where they earn their keep

  • Portfolio and agency sites.
  • Creative product launches.
  • Interactive galleries.
  • Playful landing pages.

How they are built

Pointer positions are smoothed with springs and drawn with transforms or canvas, so effects stay smooth without re-rendering React. Every effect respects reduced motion and stays out of the way of clicks.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 17 cursor effects

1 is free and MIT licensed, and 16 are part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

  • Cursor Trail (Pro): A React cursor trail: sparks fly off the pointer, drift down and cool
  • Blob Cursor (Pro): A React blob cursor that trails the pointer and swells over links
  • Spotlight Reveal (Pro): A React spotlight reveal: the pointer cuts a circle to show hidden content
  • Image Trail (Pro): A React image trail: photos drop along the pointer path and fade
  • Cursor Label (Pro): A React cursor label: a pill that follows the pointer and says View or Play
  • Glow Cursor (Pro): A React glow cursor: a soft light follows the pointer and flares over links
  • Swarm Cursor (Pro): A React swarm cursor: a flock of dots chases the pointer with boid rules
  • Cursor Grid (Pro): A React cursor grid: cells near the pointer light up, grow and turn to face it
  • Target Cursor (Pro): A React target cursor: corner brackets spin and lock onto links and buttons
  • Ghost Cursor (Pro): A React ghost cursor: a dot drags a fading streak like motion blur
  • Splash Cursor (Pro): A React splash cursor: ink splashes spread like dye in water
  • Click Spark: React click sparks: short lines radiate from every click
  • Crosshair (Pro): A React crosshair cursor with an x, y readout that snaps to elements
  • Pixel Trail (Pro): A React pixel trail: square pixels light up and fade in steps
  • Ribbons (Pro): React ribbons cursor: silk ribbons chase the pointer in tapered bands
  • Morph Cursor (Pro): A React morph cursor: a dot that becomes a ring, a text bar or a drag circle
  • Ripple Cursor (Pro): React ripple cursor: rings expand from every click

Install one

npx shadcn@latest add https://charcoalui.com/r/click-spark.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

Frequently asked questions

Do cursor effects work on mobile?
They switch off on touch devices, where there is no cursor to follow, so mobile visitors see the page as normal.
Will they block clicks?
No. Effect layers ignore pointer events, so links and buttons underneath work as usual.
Can I scope an effect to one section?
Yes. Most cursor effects attach to their container, so they only run while the pointer is inside it.
Do these cursor effects work with shadcn/ui?
Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.