Portal

A glowing portal of warp-speed light you can click to jump through

portal-tw

Customize

Primary Color

Secondary Color

Rim Color

Ball Background

Speed

0.25

Density

1.00

Layers

Particle Size

1.00

Streak Length

1.00

Flow Angle

0°

Color Variety

0.60

Wave Amplitude

1.00

Wave Frequency

0.75

Vertical Distortion

0.50

Depth

0.75

Brightness

1.00

Scale

1.50

Rim Width

1.00

Rim Glow

1.00

Hover Tilt

1.00

Boost

1.00

InteractiveIntroPaused

Props

Name	Type	Default	Description
`primaryColor`	string	`"#C084FC"`	First colour of the light streaks.
`secondaryColor`	string	`"#E879F9"`	Second colour of the light streaks.
`centerColor`	string	`"#F0ABFC"`	Colour of the glowing rim and halo.
`ballBgColor`	string	`"auto"`	Fill behind the streaks inside the portal. Auto is transparent on dark pages and a dark window on light pages. Accepts any colour or transparent.
`mode`	"streaks" \| "tunnel" \| "vortex"	`"streaks"`	How the light travels: sideways streaks, a warp tunnel flying out of the centre, or a spiral vortex.
`speed`	number	`0.25`	Speed of the streaks.
`density`	number	`1`	How many particles each layer holds.
`layerCount`	number	`7`	Number of particle layers, from 1 to 7.
`particleSize`	number	`1`	Size of each particle of light.
`streakLength`	number	`1`	How long the light streaks are stretched.
`flowAngle`	number	`0`	Direction of the streaks in degrees (streaks mode).
`colorVariety`	number	`0.6`	How much each particle varies between the two colours.
`waveAmplitude`	number	`1`	Strength of the slow sway.
`waveFrequency`	number	`0.75`	Speed of the slow sway.
`verticalDistortion`	number	`0.5`	Waviness across the streaks.
`depthIntensity`	number	`0.75`	How strongly light gathers toward the rim, giving depth.
`brightness`	number	`1`	Overall brightness.
`scale`	number	`1.5`	Size of the portal in the frame.
`rimWidth`	number	`1`	Width of the glowing rim.
`rimGlow`	number	`1`	Brightness of the rim and the halo around it.
`hoverTilt`	number	`1`	How far the flow leans toward the pointer.
`interactive`	boolean	`true`	Click to jump into hyperspace: the streaks stretch and race, then settle.
`boostStrength`	number	`1`	Strength of the click boost.
`intro`	boolean	`true`	Springs the portal open when it appears.
`paused`	boolean	`false`	Stops the motion. Reduced-motion users get a still portal.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`ref`	{ boost }	`—`	boost(strength?) triggers the hyperspace jump from code.
`className`	string	`—`	Classes for the root, which fills its positioned parent.
`style`	CSSProperties	`—`	Inline styles for the root element.

primaryColorstring

First colour of the light streaks.

Default"#C084FC"

secondaryColorstring

Second colour of the light streaks.

Default"#E879F9"

centerColorstring

Colour of the glowing rim and halo.

Default"#F0ABFC"

ballBgColorstring

Fill behind the streaks inside the portal. Auto is transparent on dark pages and a dark window on light pages. Accepts any colour or transparent.

Default"auto"

mode"streaks" | "tunnel" | "vortex"

How the light travels: sideways streaks, a warp tunnel flying out of the centre, or a spiral vortex.

Default"streaks"

speednumber

Speed of the streaks.

Default0.25

densitynumber

How many particles each layer holds.

Default1

layerCountnumber

Number of particle layers, from 1 to 7.

Default7

particleSizenumber

Size of each particle of light.

Default1

streakLengthnumber

How long the light streaks are stretched.

Default1

flowAnglenumber

Direction of the streaks in degrees (streaks mode).

Default0

colorVarietynumber

How much each particle varies between the two colours.

Default0.6

waveAmplitudenumber

Strength of the slow sway.

Default1

waveFrequencynumber

Speed of the slow sway.

Default0.75

verticalDistortionnumber

Waviness across the streaks.

Default0.5

depthIntensitynumber

How strongly light gathers toward the rim, giving depth.

Default0.75

brightnessnumber

Overall brightness.

Default1

scalenumber

Size of the portal in the frame.

Default1.5

rimWidthnumber

Width of the glowing rim.

Default1

rimGlownumber

Brightness of the rim and the halo around it.

Default1

hoverTiltnumber

How far the flow leans toward the pointer.

Default1

interactiveboolean

Click to jump into hyperspace: the streaks stretch and race, then settle.

Defaulttrue

boostStrengthnumber

Strength of the click boost.

Default1

introboolean

Springs the portal open when it appears.

Defaulttrue

pausedboolean

Stops the motion. Reduced-motion users get a still portal.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

ref{ boost }

boost(strength?) triggers the hyperspace jump from code.

Default—

classNamestring

Classes for the root, which fills its positioned parent.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

Name

Type

Default

Description

primaryColor

string

"#C084FC"

First colour of the light streaks.

secondaryColor

string

"#E879F9"

Second colour of the light streaks.

centerColor

string

"#F0ABFC"

Colour of the glowing rim and halo.

ballBgColor

string

"auto"

Fill behind the streaks inside the portal. Auto is transparent on dark pages and a dark window on light pages. Accepts any colour or transparent.

mode

"streaks" | "tunnel" | "vortex"

"streaks"

How the light travels: sideways streaks, a warp tunnel flying out of the centre, or a spiral vortex.

speed

number

0.25

Speed of the streaks.

density

number

1

How many particles each layer holds.

layerCount

number

7

Number of particle layers, from 1 to 7.

particleSize

number

1

Size of each particle of light.

streakLength

number

1

How long the light streaks are stretched.

flowAngle

number

0

Direction of the streaks in degrees (streaks mode).

colorVariety

number

0.6

How much each particle varies between the two colours.

waveAmplitude

number

1

Strength of the slow sway.

waveFrequency

number

0.75

Speed of the slow sway.

verticalDistortion

number

0.5

Waviness across the streaks.

depthIntensity

number

0.75

How strongly light gathers toward the rim, giving depth.

brightness

number

1

Overall brightness.

scale

number

1.5

Size of the portal in the frame.

rimWidth

number

1

Width of the glowing rim.

rimGlow

number

1

Brightness of the rim and the halo around it.

hoverTilt

number

1

How far the flow leans toward the pointer.

interactive

boolean

true

Click to jump into hyperspace: the streaks stretch and race, then settle.

boostStrength

number

1

Strength of the click boost.

intro

boolean

true

Springs the portal open when it appears.

paused

boolean

false

Stops the motion. Reduced-motion users get a still portal.

dpr

number

2

Maximum device pixel ratio for the canvas.

ref

{ boost }

—

boost(strength?) triggers the hyperspace jump from code.

className

string

—

Classes for the root, which fills its positioned parent.

style

CSSProperties

—

Inline styles for the root element.