Portal

Circular portal shader with customizable particle effects

portal-tw

Customize

Tweak the props live

Colors

Primary Color

#C084FC

Secondary Color

#E879F9

Center Color

#F0ABFC

Background

#0a0a0a

Animation

Speed0.25

Density1

Layer Count10

Scale1.5

Brightness1

Wave & Depth

Wave Amplitude1

Wave Frequency0.75

Vertical Distortion0.5

Depth Intensity0.75

Props

Name	Type	Default	Description
`className`	string	`""`	Additional CSS classes for styling
`primaryColor`	string	`"#C084FC"`	Primary portal glow color (hex format)
`secondaryColor`	string	`"#E879F9"`	Secondary portal glow color (hex format)
`centerColor`	string	`"#F0ABFC"`	Center highlight color (hex format)
`ballBgColor`	string	`"transparent"`	Background color for the ball (hex, rgb, rgba, or transparent)
`speed`	number	`1.0`	Animation speed multiplier (0.1-3.0)
`density`	number	`1.0`	Particle density scale factor (0.5-2.0)
`layerCount`	number	`7`	Number of particle layers to render (1-7)
`waveAmplitude`	number	`1.0`	Horizontal wave distortion amplitude (0-2.0)
`waveFrequency`	number	`0.08`	Horizontal wave frequency (0.01-0.2)
`verticalDistortion`	number	`0.2`	Vertical wave distortion amount (0-1.0)
`depthIntensity`	number	`0.2`	Tunnel depth effect intensity (0.1-0.5)
`brightness`	number	`1.0`	Overall brightness multiplier (0.5-2.0)
`scale`	number	`1.0`	Scale/zoom of the portal effect (0.5-3.0)

classNamestring

Additional CSS classes for styling

Default:""

primaryColorstring

Primary portal glow color (hex format)

Default:"#C084FC"

secondaryColorstring

Secondary portal glow color (hex format)

Default:"#E879F9"

centerColorstring

Center highlight color (hex format)

Default:"#F0ABFC"

ballBgColorstring

Background color for the ball (hex, rgb, rgba, or transparent)

Default:"transparent"

speednumber

Animation speed multiplier (0.1-3.0)

Default:1.0

densitynumber

Particle density scale factor (0.5-2.0)

Default:1.0

layerCountnumber

Number of particle layers to render (1-7)

Default:7

waveAmplitudenumber

Horizontal wave distortion amplitude (0-2.0)

Default:1.0

waveFrequencynumber

Horizontal wave frequency (0.01-0.2)

Default:0.08

verticalDistortionnumber

Vertical wave distortion amount (0-1.0)

Default:0.2

depthIntensitynumber

Tunnel depth effect intensity (0.1-0.5)

Default:0.2

brightnessnumber

Overall brightness multiplier (0.5-2.0)

Default:1.0

scalenumber

Scale/zoom of the portal effect (0.5-3.0)

Default:1.0