Fading Stars

Stars rising from beyond the frame on trails that fade behind them

fading-stars-tw

Customize

Trail

Head

Background

Spread

150°

Focus

0.35

Origin Offset

0.18

Origin Shift

0.00

Count

480

Speed

0.16

Speed Variance

0.60

Acceleration

0.90

Trail Length

0.45

Trail Fade

1.60

Line Width

1.00px

Star Size

2.2px

Twinkle

0.35

Fade In

0.06

Fade Out

0.30

Depth

0.50

Glow

0.45

Intensity

1.00

Grain

0.30

Thrust

1.00

Burst

Quality

1.00

InteractivePaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#5227FF", "#FF9FFC"]`	Trail colour and head colour. The end of each trail warms toward the head colour, and distant stars blend the two in OKLab. On light backgrounds both are deepened into ink tones.
`backgroundColor`	string	`"#0a0a0a"`	Colour behind the stars.
`mode`	"auto" \| "glow" \| "ink"	`"auto"`	glow adds light for dark backgrounds, ink draws fine dark lines for light ones. auto picks from the background brightness.
`direction`	"up" \| "down" \| "left" \| "right" \| "out"	`"up"`	Direction the stars travel. up, down, left and right stream from an origin beyond the opposite edge; out radiates in every direction from the centre.
`spread`	number	`150`	Width of the fan in degrees, from 1 to 180. Ignored by out, which always covers 360°.
`focus`	number	`0.35`	How strongly stars gather toward the centre line of the fan, from 0 (even) to 1.
`originOffset`	number	`0.18`	How far beyond the edge the origin sits, as a fraction of the frame's shorter side. Larger values make the rays more parallel.
`originShift`	number	`0`	Position of the origin along its edge, from -1 (left or top) to 1 (right or bottom). With out it moves the centre horizontally.
`count`	number	`480`	Number of stars in a 1280×720 frame, up to 3,000. Smaller frames show proportionally fewer.
`speed`	number	`0.16`	Base travel speed, in frame lengths per second along the direction of travel.
`speedVariance`	number	`0.6`	How much speed differs from star to star, from 0 (all equal) to 1.
`acceleration`	number	`0.9`	Warp acceleration: stars gather speed as they move away from the origin, from 0 to 4.
`trailLength`	number	`0.45`	Trail length as a fraction of the frame at base speed. Trails scale with each star's current speed, so faster stars streak longer.
`trailFade`	number	`1.6`	Falloff along each trail from head to tail. Higher values give shorter, sharper tails.
`lineWidth`	number	`1`	Width of the trails in pixels. Distant stars draw thinner.
`starSize`	number	`2.2`	Diameter of the star heads in pixels. 0 hides them.
`twinkle`	number	`0.35`	How much the heads shimmer, from 0 to 1.
`fadeIn`	number	`0.06`	Share of the path over which a star fades in after entering the frame, from 0 to 1.
`fadeOut`	number	`0.3`	Share of the path over which a star fades out before reaching the far edge, from 0 to 1. At 0 stars leave the frame instead.
`depth`	number	`0.5`	Share of stars that sit further back: smaller, dimmer and slower, for parallax. From 0 to 1.
`glow`	number	`0.45`	Soft halo around the brightest heads, from 0 to 3.
`intensity`	number	`1`	Overall exposure.
`grain`	number	`0.3`	Fine film grain on lit areas, from 0 to 1. The background stays clean.
`interactive`	boolean	`true`	Respond to the pointer.
`thrust`	number	`1`	Moving the pointer over the stars speeds up the flow in proportion to pointer speed, stretching the trails, then it eases back over about a second. From 0 to 3.
`burst`	number	`64`	Clicking or tapping launches a shell of this many stars at once, which rises as an expanding arc. Bursts stack. 0 turns it off.
`paused`	boolean	`false`	Freeze the stars. Reduced-motion users always get a still frame.
`quality`	number	`1`	Resolution and star count scale from 0.25 to 1. Lower values are cheaper on large screens.
`ref`	{ burst }	`—`	burst() launches a shell of stars, for example when a form is submitted.
`children`	ReactNode	`—`	Content placed over the stars.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 240px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

colors[string, string]

Trail colour and head colour. The end of each trail warms toward the head colour, and distant stars blend the two in OKLab. On light backgrounds both are deepened into ink tones.

Default["#5227FF", "#FF9FFC"]

backgroundColorstring

Colour behind the stars.

Default"#0a0a0a"

mode"auto" | "glow" | "ink"

glow adds light for dark backgrounds, ink draws fine dark lines for light ones. auto picks from the background brightness.

Default"auto"

direction"up" | "down" | "left" | "right" | "out"

Direction the stars travel. up, down, left and right stream from an origin beyond the opposite edge; out radiates in every direction from the centre.

Default"up"

spreadnumber

Width of the fan in degrees, from 1 to 180. Ignored by out, which always covers 360°.

Default150

focusnumber

How strongly stars gather toward the centre line of the fan, from 0 (even) to 1.

Default0.35

originOffsetnumber

How far beyond the edge the origin sits, as a fraction of the frame's shorter side. Larger values make the rays more parallel.

Default0.18

originShiftnumber

Position of the origin along its edge, from -1 (left or top) to 1 (right or bottom). With out it moves the centre horizontally.

Default0

countnumber

Number of stars in a 1280×720 frame, up to 3,000. Smaller frames show proportionally fewer.

Default480

speednumber

Base travel speed, in frame lengths per second along the direction of travel.

Default0.16

speedVariancenumber

How much speed differs from star to star, from 0 (all equal) to 1.

Default0.6

accelerationnumber

Warp acceleration: stars gather speed as they move away from the origin, from 0 to 4.

Default0.9

trailLengthnumber

Trail length as a fraction of the frame at base speed. Trails scale with each star's current speed, so faster stars streak longer.

Default0.45

trailFadenumber

Falloff along each trail from head to tail. Higher values give shorter, sharper tails.

Default1.6

lineWidthnumber

Width of the trails in pixels. Distant stars draw thinner.

Default1

starSizenumber

Diameter of the star heads in pixels. 0 hides them.

Default2.2

twinklenumber

How much the heads shimmer, from 0 to 1.

Default0.35

fadeInnumber

Share of the path over which a star fades in after entering the frame, from 0 to 1.

Default0.06

fadeOutnumber

Share of the path over which a star fades out before reaching the far edge, from 0 to 1. At 0 stars leave the frame instead.

Default0.3

depthnumber

Share of stars that sit further back: smaller, dimmer and slower, for parallax. From 0 to 1.

Default0.5

glownumber

Soft halo around the brightest heads, from 0 to 3.

Default0.45

intensitynumber

Overall exposure.

Default1

grainnumber

Fine film grain on lit areas, from 0 to 1. The background stays clean.

Default0.3

interactiveboolean

Respond to the pointer.

Defaulttrue

thrustnumber

Moving the pointer over the stars speeds up the flow in proportion to pointer speed, stretching the trails, then it eases back over about a second. From 0 to 3.

Default1

burstnumber

Clicking or tapping launches a shell of this many stars at once, which rises as an expanding arc. Bursts stack. 0 turns it off.

Default64

pausedboolean

Freeze the stars. Reduced-motion users always get a still frame.

Defaultfalse

qualitynumber

Resolution and star count scale from 0.25 to 1. Lower values are cheaper on large screens.

Default1

ref{ burst }

burst() launches a shell of stars, for example when a form is submitted.

Default—

childrenReactNode

Content placed over the stars.

Default—

classNamestring

Classes for the root element. It fills its parent, with a 240px minimum height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

colors

[string, string]

["#5227FF", "#FF9FFC"]

Trail colour and head colour. The end of each trail warms toward the head colour, and distant stars blend the two in OKLab. On light backgrounds both are deepened into ink tones.

backgroundColor

string

"#0a0a0a"

Colour behind the stars.

mode

"auto" | "glow" | "ink"

"auto"

glow adds light for dark backgrounds, ink draws fine dark lines for light ones. auto picks from the background brightness.

direction

"up" | "down" | "left" | "right" | "out"

"up"

Direction the stars travel. up, down, left and right stream from an origin beyond the opposite edge; out radiates in every direction from the centre.

spread

number

150

Width of the fan in degrees, from 1 to 180. Ignored by out, which always covers 360°.

focus

number

0.35

How strongly stars gather toward the centre line of the fan, from 0 (even) to 1.

originOffset

number

0.18

How far beyond the edge the origin sits, as a fraction of the frame's shorter side. Larger values make the rays more parallel.

originShift

number

0

Position of the origin along its edge, from -1 (left or top) to 1 (right or bottom). With out it moves the centre horizontally.

count

number

480

Number of stars in a 1280×720 frame, up to 3,000. Smaller frames show proportionally fewer.

speed

number

0.16

Base travel speed, in frame lengths per second along the direction of travel.

speedVariance

number

0.6

How much speed differs from star to star, from 0 (all equal) to 1.

acceleration

number

0.9

Warp acceleration: stars gather speed as they move away from the origin, from 0 to 4.

trailLength

number

0.45

Trail length as a fraction of the frame at base speed. Trails scale with each star's current speed, so faster stars streak longer.

trailFade

number

1.6

Falloff along each trail from head to tail. Higher values give shorter, sharper tails.

lineWidth

number

1

Width of the trails in pixels. Distant stars draw thinner.

starSize

number

2.2

Diameter of the star heads in pixels. 0 hides them.

twinkle

number

0.35

How much the heads shimmer, from 0 to 1.

fadeIn

number

0.06

Share of the path over which a star fades in after entering the frame, from 0 to 1.

fadeOut

number

0.3

Share of the path over which a star fades out before reaching the far edge, from 0 to 1. At 0 stars leave the frame instead.

depth

number

0.5

Share of stars that sit further back: smaller, dimmer and slower, for parallax. From 0 to 1.

glow

number

0.45

Soft halo around the brightest heads, from 0 to 3.

intensity

number

1

Overall exposure.

grain

number

0.3

Fine film grain on lit areas, from 0 to 1. The background stays clean.

interactive

boolean

true

Respond to the pointer.

thrust

number

1

Moving the pointer over the stars speeds up the flow in proportion to pointer speed, stretching the trails, then it eases back over about a second. From 0 to 3.

burst

number

64

Clicking or tapping launches a shell of this many stars at once, which rises as an expanding arc. Bursts stack. 0 turns it off.

paused

boolean

false

Freeze the stars. Reduced-motion users always get a still frame.

quality

number

1

Resolution and star count scale from 0.25 to 1. Lower values are cheaper on large screens.

ref

{ burst }

—

burst() launches a shell of stars, for example when a form is submitted.

children

ReactNode

—

Content placed over the stars.

className

string

—

Classes for the root element. It fills its parent, with a 240px minimum height.

style

CSSProperties

—

Inline styles for the root element.