Horizon Bloom

A sunrise breaking over the glowing edge of a dark planet

horizon-bloom-tw

Customize

Warm Color

Cool Color

Background

Horizon

0.72

Curvature

1.00

Tilt

0°

Sun Position

0.15

Sunrise

1.00

Spread

0.40

Atmosphere

1.00

Thickness

1.00

Rim

1.00

Flare

1.00

Airglow

0.50

Clouds

0.50

Stars

0.50

Aurora

1.00

Speed

0.50

Drift

0.50

Parallax

0.50

Bloom

0.50

Grain

0.25

Auto AuroraInteractiveIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#FF9FFC", "#5227FF"]`	The warm colour of the light near the surface and the cool colour of the upper atmosphere, blended in OKLab. On light backgrounds they become matching inks.
`backgroundColor`	string	`"transparent"`	Background of the component. Transparent reads the colour behind the component.
`horizon`	number	`0.72`	Height of the top of the planet, as a fraction of the frame from the top.
`curvature`	number	`1`	How curved the horizon is: low values give a vast, nearly flat horizon, high values a small planet seen whole.
`tilt`	number	`0`	Rotation of the view in degrees. 180 hangs the planet from the top, ±90 puts its edge at a side.
`sunPosition`	number	`0.15`	Where along the horizon the sun rises, from -1 (left) to 1 (right).
`sunrise`	number	`1`	Brightness of the sun breaking over the edge. 0 leaves only the lit atmosphere.
`spread`	number	`0.4`	How far the sunlight spreads along the horizon. High values light the whole edge into a ring.
`atmosphere`	number	`1`	Brightness of the glowing atmosphere above the edge.
`thickness`	number	`1`	Height of the atmosphere. Low values give a crisp thin rim, high values a soft hazy glow.
`rim`	number	`1`	Brightness of the razor-thin line of light along the edge.
`flare`	number	`1`	Brightness of the sun's point of light and its glare.
`airglow`	number	`0.5`	A faint second band of light floating above the atmosphere, like the airglow seen from orbit.
`clouds`	number	`0.5`	Cloud tops catching the light just below the horizon near the sun.
`stars`	number	`0.5`	Brightness of the faint twinkling stars. Hidden on light backgrounds.
`aurora`	number	`1`	Strength of the aurora curtains that a click or tap raises from the horizon. 0 turns them off.
`autoAurora`	boolean	`false`	Raise an aurora on its own every few seconds.
`speed`	number	`0.5`	Speed of the slow motion: twinkling, airglow and drifting aurora rays.
`drift`	number	`0.5`	How much the sun slowly wanders along the horizon.
`parallax`	number	`0.5`	How much the view gently rolls and lifts toward the pointer, like a camera drifting in orbit.
`bloom`	number	`0.5`	Soft glow around the brightest light on dark backgrounds.
`grain`	number	`0.25`	Fine film grain over the lit areas.
`interactive`	boolean	`true`	Pointer parallax, and clicking or tapping to raise an aurora where you click.
`intro`	boolean	`true`	Play the sunrise when the component first appears: the light spreads along the edge as the sun breaks over it.
`paused`	boolean	`false`	Stops the motion. Reduced-motion users get the risen sun, still.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`children`	ReactNode	`—`	Content laid over the scene, such as a hero headline. Clicks on its links and buttons never raise an aurora.
`ref`	{ bloom, replay }	`—`	bloom(x?, strength?) raises an aurora above a horizontal position given as a fraction of the width; replay() replays the sunrise.
`className`	string	`—`	Classes for the root element. It fills its parent, with a 320px minimum height.
`style`	CSSProperties	`—`	Inline styles for the root element.

colors[string, string]

The warm colour of the light near the surface and the cool colour of the upper atmosphere, blended in OKLab. On light backgrounds they become matching inks.

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

backgroundColorstring

Background of the component. Transparent reads the colour behind the component.

Default"transparent"

horizonnumber

Height of the top of the planet, as a fraction of the frame from the top.

Default0.72

curvaturenumber

How curved the horizon is: low values give a vast, nearly flat horizon, high values a small planet seen whole.

Default1

tiltnumber

Rotation of the view in degrees. 180 hangs the planet from the top, ±90 puts its edge at a side.

Default0

sunPositionnumber

Where along the horizon the sun rises, from -1 (left) to 1 (right).

Default0.15

sunrisenumber

Brightness of the sun breaking over the edge. 0 leaves only the lit atmosphere.

Default1

spreadnumber

How far the sunlight spreads along the horizon. High values light the whole edge into a ring.

Default0.4

atmospherenumber

Brightness of the glowing atmosphere above the edge.

Default1

thicknessnumber

Height of the atmosphere. Low values give a crisp thin rim, high values a soft hazy glow.

Default1

rimnumber

Brightness of the razor-thin line of light along the edge.

Default1

flarenumber

Brightness of the sun's point of light and its glare.

Default1

airglownumber

A faint second band of light floating above the atmosphere, like the airglow seen from orbit.

Default0.5

cloudsnumber

Cloud tops catching the light just below the horizon near the sun.

Default0.5

starsnumber

Brightness of the faint twinkling stars. Hidden on light backgrounds.

Default0.5

auroranumber

Strength of the aurora curtains that a click or tap raises from the horizon. 0 turns them off.

Default1

autoAuroraboolean

Raise an aurora on its own every few seconds.

Defaultfalse

speednumber

Speed of the slow motion: twinkling, airglow and drifting aurora rays.

Default0.5

driftnumber

How much the sun slowly wanders along the horizon.

Default0.5

parallaxnumber

How much the view gently rolls and lifts toward the pointer, like a camera drifting in orbit.

Default0.5

bloomnumber

Soft glow around the brightest light on dark backgrounds.

Default0.5

grainnumber

Fine film grain over the lit areas.

Default0.25

interactiveboolean

Pointer parallax, and clicking or tapping to raise an aurora where you click.

Defaulttrue

introboolean

Play the sunrise when the component first appears: the light spreads along the edge as the sun breaks over it.

Defaulttrue

pausedboolean

Stops the motion. Reduced-motion users get the risen sun, still.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

childrenReactNode

Content laid over the scene, such as a hero headline. Clicks on its links and buttons never raise an aurora.

Default—

ref{ bloom, replay }

bloom(x?, strength?) raises an aurora above a horizontal position given as a fraction of the width; replay() replays the sunrise.

Default—

classNamestring

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

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

colors

[string, string]

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

The warm colour of the light near the surface and the cool colour of the upper atmosphere, blended in OKLab. On light backgrounds they become matching inks.

backgroundColor

string

"transparent"

Background of the component. Transparent reads the colour behind the component.

horizon

number

0.72

Height of the top of the planet, as a fraction of the frame from the top.

curvature

number

1

How curved the horizon is: low values give a vast, nearly flat horizon, high values a small planet seen whole.

tilt

number

0

Rotation of the view in degrees. 180 hangs the planet from the top, ±90 puts its edge at a side.

sunPosition

number

0.15

Where along the horizon the sun rises, from -1 (left) to 1 (right).

sunrise

number

1

Brightness of the sun breaking over the edge. 0 leaves only the lit atmosphere.

spread

number

0.4

How far the sunlight spreads along the horizon. High values light the whole edge into a ring.

atmosphere

number

1

Brightness of the glowing atmosphere above the edge.

thickness

number

1

Height of the atmosphere. Low values give a crisp thin rim, high values a soft hazy glow.

rim

number

1

Brightness of the razor-thin line of light along the edge.

flare

number

1

Brightness of the sun's point of light and its glare.

airglow

number

0.5

A faint second band of light floating above the atmosphere, like the airglow seen from orbit.

clouds

number

0.5

Cloud tops catching the light just below the horizon near the sun.

stars

number

0.5

Brightness of the faint twinkling stars. Hidden on light backgrounds.

aurora

number

1

Strength of the aurora curtains that a click or tap raises from the horizon. 0 turns them off.

autoAurora

boolean

false

Raise an aurora on its own every few seconds.

speed

number

0.5

Speed of the slow motion: twinkling, airglow and drifting aurora rays.

drift

number

0.5

How much the sun slowly wanders along the horizon.

parallax

number

0.5

How much the view gently rolls and lifts toward the pointer, like a camera drifting in orbit.

bloom

number

0.5

Soft glow around the brightest light on dark backgrounds.

grain

number

0.25

Fine film grain over the lit areas.

interactive

boolean

true

Pointer parallax, and clicking or tapping to raise an aurora where you click.

intro

boolean

true

Play the sunrise when the component first appears: the light spreads along the edge as the sun breaks over it.

paused

boolean

false

Stops the motion. Reduced-motion users get the risen sun, still.

dpr

number

2

Maximum device pixel ratio for the canvas.

children

ReactNode

—

Content laid over the scene, such as a hero headline. Clicks on its links and buttons never raise an aurora.

ref

{ bloom, replay }

—

bloom(x?, strength?) raises an aurora above a horizontal position given as a fraction of the width; replay() replays the sunrise.

className

string

—

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

style

CSSProperties

—

Inline styles for the root element.