Stardust Cursor

Fine dust carried on a fluid wake behind the cursor, with a mushroom puff on click

stardust-cursor-tw

Customize

First Colour

Second Colour

Dot Size

2.4px

Size Variance

0.40

Density

1.40

Spread

64px

Grain

0.70

Colour Cycle

900px

Life

2.4s

Softness

0.16

Highlight

0.30

Echo

0.45

Echo Offset

1.50px

Force

1.00

Radius

80px

Swirl

0.50

Turbulence

0.60

Momentum

1.00

Drift

1.0

Wind

0.0

Wind Angle

-90°

Opacity

1.00

Puff Size

1.00

Puff Force

1.00

Autoplay Speed

1.00

Idle Delay

1.50s

Quality

1.00

PuffAutoplayIntroInteractiveDisabled

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#FF9FFC", "#8B5CF6"]`	The two colours the dust drifts between along each stroke, blended in OKLab. Accepts any CSS colour, including currentColor.
`blend`	"light" \| "ink"	`"light"`	light draws bright dust for dark pages. ink draws dark dust with normal transparency for light pages.
`shape`	"round" \| "square"	`"round"`	Shape of each grain of dust.
`dotSize`	number	`2.4`	Diameter of a grain in pixels where the cloud is dense. Thin parts of the cloud use smaller grains.
`sizeVariance`	number	`0.4`	Random variation in grain size, from 0 (all the same) to 1.
`density`	number	`1.4`	How tightly the grains are packed. Higher values use more, closer grains.
`spread`	number	`64`	Radius of a fresh stroke in pixels. The cloud billows wider as it flows.
`grain`	number	`0.7`	Streaks brushed into fresh dust along the stroke, from 0 (an even cloud) to 1.
`cycle`	number	`900`	Pixels of pointer travel for the dust to drift from the first colour to the second. It then drifts back.
`life`	number	`2.4`	Seconds until a stroke has dissolved completely.
`softness`	number	`0.16`	How gradually each grain fades as the dust thins out, from 0.01 (grains switch off) to 1 (a slow, soft dissolve).
`highlight`	number	`0.3`	How much fresh dust is lifted toward white before it settles. In ink mode it deepens toward ink instead.
`echo`	number	`0.45`	Strength of the offset shadow behind each grain, which gives the cloud depth. 0 turns it off.
`echoOffset`	number	`1.5`	Offset of that shadow in pixels.
`force`	number	`1`	How hard the pointer pushes the air. Higher values fling the dust further along the stroke.
`radius`	number	`80`	Radius in pixels of the air the pointer moves.
`swirl`	number	`0.5`	How strongly the wake curls into eddies.
`turbulence`	number	`0.6`	Slow, broad turbulence in the wake that makes the dust billow.
`momentum`	number	`1`	How long the air keeps moving after the pointer stops.
`drift`	number	`1`	A slow wander of the grains inside the cloud.
`wind`	number	`0`	A steady breeze that carries the dust away, in steps of 40px per second.
`windAngle`	number	`-90`	Direction of the breeze in degrees. 0 blows to the right, -90 blows up.
`opacity`	number	`1`	Overall opacity of the dust, from 0 to 1.
`puff`	boolean	`true`	Click or tap to fire a puff of dust that rolls up into a mushroom cloud. It follows the stroke direction and turns inward near an edge.
`puffSize`	number	`1`	Size of the puff.
`puffForce`	number	`1`	How far and fast the puff travels.
`maxParticles`	number	`160000`	Upper limit on the number of grains. On very large screens the grains spread out to stay under it.
`autoplay`	boolean	`false`	Sweep strokes across the component on its own while the pointer is away, with the odd puff. The pointer takes over the moment it enters.
`autoplaySpeed`	number	`1`	Speed multiplier for autoplay.
`idleDelay`	number	`1.5`	Seconds after the pointer leaves before autoplay resumes.
`intro`	boolean	`true`	Sweep one stroke across, ending in a puff, the first time the component scrolls into view. With autoplay on, strokes flow in from the edge instead.
`interactive`	boolean	`true`	Follow the visitor's pointer. Turn it off to show only autoplay and scripted puffs.
`disabled`	boolean	`false`	Stop painting and ignore input. Dust already on screen dissolves.
`quality`	number	`1`	Render scale from 0.5 to 1. Lower values reduce the canvas and fluid resolution for slower devices.
`ref`	{ puff, clear }	`—`	puff(x?, y?, angle?) fires a puff at a point in pixels, with an optional angle in degrees (it defaults to the stroke direction). clear() removes all dust.
`children`	ReactNode	`—`	Content the dust drifts over.
`className`	string	`—`	Classes for the root element. It fills its parent and is at least 240px tall.
`style`	CSSProperties	`—`	Inline styles for the root element.

colors[string, string]

The two colours the dust drifts between along each stroke, blended in OKLab. Accepts any CSS colour, including currentColor.

Default["#FF9FFC", "#8B5CF6"]

blend"light" | "ink"

light draws bright dust for dark pages. ink draws dark dust with normal transparency for light pages.

Default"light"

shape"round" | "square"

Shape of each grain of dust.

Default"round"

dotSizenumber

Diameter of a grain in pixels where the cloud is dense. Thin parts of the cloud use smaller grains.

Default2.4

sizeVariancenumber

Random variation in grain size, from 0 (all the same) to 1.

Default0.4

densitynumber

How tightly the grains are packed. Higher values use more, closer grains.

Default1.4

spreadnumber

Radius of a fresh stroke in pixels. The cloud billows wider as it flows.

Default64

grainnumber

Streaks brushed into fresh dust along the stroke, from 0 (an even cloud) to 1.

Default0.7

cyclenumber

Pixels of pointer travel for the dust to drift from the first colour to the second. It then drifts back.

Default900

lifenumber

Seconds until a stroke has dissolved completely.

Default2.4

softnessnumber

How gradually each grain fades as the dust thins out, from 0.01 (grains switch off) to 1 (a slow, soft dissolve).

Default0.16

highlightnumber

How much fresh dust is lifted toward white before it settles. In ink mode it deepens toward ink instead.

Default0.3

echonumber

Strength of the offset shadow behind each grain, which gives the cloud depth. 0 turns it off.

Default0.45

echoOffsetnumber

Offset of that shadow in pixels.

Default1.5

forcenumber

How hard the pointer pushes the air. Higher values fling the dust further along the stroke.

Default1

radiusnumber

Radius in pixels of the air the pointer moves.

Default80

swirlnumber

How strongly the wake curls into eddies.

Default0.5

turbulencenumber

Slow, broad turbulence in the wake that makes the dust billow.

Default0.6

momentumnumber

How long the air keeps moving after the pointer stops.

Default1

driftnumber

A slow wander of the grains inside the cloud.

Default1

windnumber

A steady breeze that carries the dust away, in steps of 40px per second.

Default0

windAnglenumber

Direction of the breeze in degrees. 0 blows to the right, -90 blows up.

Default-90

opacitynumber

Overall opacity of the dust, from 0 to 1.

Default1

puffboolean

Click or tap to fire a puff of dust that rolls up into a mushroom cloud. It follows the stroke direction and turns inward near an edge.

Defaulttrue

puffSizenumber

Size of the puff.

Default1

puffForcenumber

How far and fast the puff travels.

Default1

maxParticlesnumber

Upper limit on the number of grains. On very large screens the grains spread out to stay under it.

Default160000

autoplayboolean

Sweep strokes across the component on its own while the pointer is away, with the odd puff. The pointer takes over the moment it enters.

Defaultfalse

autoplaySpeednumber

Speed multiplier for autoplay.

Default1

idleDelaynumber

Seconds after the pointer leaves before autoplay resumes.

Default1.5

introboolean

Sweep one stroke across, ending in a puff, the first time the component scrolls into view. With autoplay on, strokes flow in from the edge instead.

Defaulttrue

interactiveboolean

Follow the visitor's pointer. Turn it off to show only autoplay and scripted puffs.

Defaulttrue

disabledboolean

Stop painting and ignore input. Dust already on screen dissolves.

Defaultfalse

qualitynumber

Render scale from 0.5 to 1. Lower values reduce the canvas and fluid resolution for slower devices.

Default1

ref{ puff, clear }

puff(x?, y?, angle?) fires a puff at a point in pixels, with an optional angle in degrees (it defaults to the stroke direction). clear() removes all dust.

Default—

childrenReactNode

Content the dust drifts over.

Default—

classNamestring

Classes for the root element. It fills its parent and is at least 240px tall.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

colors

[string, string]

["#FF9FFC", "#8B5CF6"]

The two colours the dust drifts between along each stroke, blended in OKLab. Accepts any CSS colour, including currentColor.

blend

"light" | "ink"

"light"

light draws bright dust for dark pages. ink draws dark dust with normal transparency for light pages.

shape

"round" | "square"

"round"

Shape of each grain of dust.

dotSize

number

2.4

Diameter of a grain in pixels where the cloud is dense. Thin parts of the cloud use smaller grains.

sizeVariance

number

0.4

Random variation in grain size, from 0 (all the same) to 1.

density

number

1.4

How tightly the grains are packed. Higher values use more, closer grains.

spread

number

64

Radius of a fresh stroke in pixels. The cloud billows wider as it flows.

grain

number

0.7

Streaks brushed into fresh dust along the stroke, from 0 (an even cloud) to 1.

cycle

number

900

Pixels of pointer travel for the dust to drift from the first colour to the second. It then drifts back.

life

number

2.4

Seconds until a stroke has dissolved completely.

softness

number

0.16

How gradually each grain fades as the dust thins out, from 0.01 (grains switch off) to 1 (a slow, soft dissolve).

highlight

number

0.3

How much fresh dust is lifted toward white before it settles. In ink mode it deepens toward ink instead.

echo

number

0.45

Strength of the offset shadow behind each grain, which gives the cloud depth. 0 turns it off.

echoOffset

number

1.5

Offset of that shadow in pixels.

force

number

1

How hard the pointer pushes the air. Higher values fling the dust further along the stroke.

radius

number

80

Radius in pixels of the air the pointer moves.

swirl

number

0.5

How strongly the wake curls into eddies.

turbulence

number

0.6

Slow, broad turbulence in the wake that makes the dust billow.

momentum

number

1

How long the air keeps moving after the pointer stops.

drift

number

1

A slow wander of the grains inside the cloud.

wind

number

0

A steady breeze that carries the dust away, in steps of 40px per second.

windAngle

number

-90

Direction of the breeze in degrees. 0 blows to the right, -90 blows up.

opacity

number

1

Overall opacity of the dust, from 0 to 1.

puff

boolean

true

Click or tap to fire a puff of dust that rolls up into a mushroom cloud. It follows the stroke direction and turns inward near an edge.

puffSize

number

1

Size of the puff.

puffForce

number

1

How far and fast the puff travels.

maxParticles

number

160000

Upper limit on the number of grains. On very large screens the grains spread out to stay under it.

autoplay

boolean

false

Sweep strokes across the component on its own while the pointer is away, with the odd puff. The pointer takes over the moment it enters.

autoplaySpeed

number

1

Speed multiplier for autoplay.

idleDelay

number

1.5

Seconds after the pointer leaves before autoplay resumes.

intro

boolean

true

Sweep one stroke across, ending in a puff, the first time the component scrolls into view. With autoplay on, strokes flow in from the edge instead.

interactive

boolean

true

Follow the visitor's pointer. Turn it off to show only autoplay and scripted puffs.

disabled

boolean

false

Stop painting and ignore input. Dust already on screen dissolves.

quality

number

1

Render scale from 0.5 to 1. Lower values reduce the canvas and fluid resolution for slower devices.

ref

{ puff, clear }

—

puff(x?, y?, angle?) fires a puff at a point in pixels, with an optional angle in degrees (it defaults to the stroke direction). clear() removes all dust.

children

ReactNode

—

Content the dust drifts over.

className

string

—

Classes for the root element. It fills its parent and is at least 240px tall.

style

CSSProperties

—

Inline styles for the root element.