Sparkle Cursor

A high-performance WebGL GSAP animated cursor effect. As the user moves the mouse, an array of rotating, falling sparkles and cinematic glowing orbs trail behind. Built entirely on an overlay canvas using hardware-accelerated GSAP tweens, ensuring a silky smooth 60fps experience without causing React re-renders or layout thrashing.

...

How to Import

Add this import to your component file

app/page.tsx

1import { SparkleCursor } from "@/components/lightswind/sparkle-cursor"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

distance	number	50	Distance threshold in pixels before a new sparkle is emitted.	Optional
glow	boolean	true	Whether to emit cinematic glowing orbs along with the sparkles.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { SparkleCursor } from "@/components/lightswind/sparkle-cursor";
2
3export default function App() {
4  return (
5    <div className="relative min-h-screen">
6      <SparkleCursor distance={40} glow={true} />
7      
8      {/* Your page content */}
9      <h1 className="text-4xl text-white">Hello World</h1>
10    </div>
11  );
12}

Previoussmooth-cursor

Nextliquid-glass-alert

A product byＭＵＨＩＬＡＮ and Team❤️.

Sparkle Cursor

A high-performance WebGL GSAP animated cursor effect. As the user moves the mouse, an array of rotating, falling sparkles and cinematic glowing orbs trail behind. Built entirely on an overlay canvas using hardware-accelerated GSAP tweens, ensuring a silky smooth 60fps experience without causing React re-renders or layout thrashing.

...

How to Import

Add this import to your component file

app/page.tsx

1import { SparkleCursor } from "@/components/lightswind/sparkle-cursor"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

distance	number	50	Distance threshold in pixels before a new sparkle is emitted.	Optional
glow	boolean	true	Whether to emit cinematic glowing orbs along with the sparkles.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { SparkleCursor } from "@/components/lightswind/sparkle-cursor";
2
3export default function App() {
4  return (
5    <div className="relative min-h-screen">
6      <SparkleCursor distance={40} glow={true} />
7      
8      {/* Your page content */}
9      <h1 className="text-4xl text-white">Hello World</h1>
10    </div>
11  );
12}

Previoussmooth-cursor

Nextliquid-glass-alert

A product byＭＵＨＩＬＡＮ and Team❤️.

Sparkle Cursor

How to Import

Props

Basic Usage

On This Page

Contribute

Sparkle Cursor

How to Import

Props

Basic Usage

On This Page

Contribute

React Sparkle Cursor Component - Lightswind UI

Key Details of React Sparkle Cursor

Sparkle Cursor

How to Import

Props

Basic Usage

On This Page

Contribute

Sparkle Cursor

How to Import

Props

Basic Usage

On This Page

Contribute