Light Tunnel

A radial fibre-optic tunnel with light pulses racing into depth.

Default

Every prop is wired to the controls underneath. The tunnel is drawn in a WebGL fragment shader, and the vanishing point drifts toward the cursor.

Demo Content

FeaturesAbout Sign up

New Creative Components

A fibre-optic tunnel of travelling light.

Get started Learn more

Customize

Cable Color

Pulse Color

Tunnel Color

Tunnel Opacity0

Speed0.1

Flow Direction

Pulse Speed2

Pulse Length0.28

Pulse Blend1

Pulse Width1

Cable Count20

Thickness0.35

Rim Width0.15

Waviness0.3

Sway0.5

Size1

Center Offset X0

Center Offset Y0

Glow1

Fade Near0.5

Fade Far2

Brightness1

Color VarianceGrain

Grain Intensity0.05

Opacity1

Cursor Parallax

Cursor Strength0.1

API Reference

LightTunnel

Prop	Type	Default	Description
`cableColor`	`string`	`'#A855F7'`	Base color of the fibre-optic cables.
`pulseColor`	`string`	`'#A855F7'`	Color of the light pulses travelling along each cable.
`tunnelColor`	`string`	`'#5227FF'`	Tint color of the cable body fill (visible when tunnelOpacity is above 0).
`tunnelOpacity`	`number`	`0`	Opacity of the cable body fill. 0 leaves the tunnel see-through so only rims and pulses show.
`speed`	`number`	`0.1`	Overall scroll speed of the pulses down the tunnel.
`flowDirection`	`'inward' \| 'outward'`	`'outward'`	Whether the light travels toward or away from the vanishing point.
`pulseSpeed`	`number`	`2`	Speed multiplier for the individual light pulses.
`pulseLength`	`number`	`0.28`	Length of the glowing pulse along each cable.
`pulseBlend`	`number`	`1`	How softly the pulse fades out at its edges. low is a crisp packet, high is a long smooth trail.
`pulseWidth`	`number`	`1`	How much of the cable cross-section the pulse lights up. 1 fills the cable, lower narrows it to a filament.
`cableCount`	`number`	`20`	Number of cables radiating around the tunnel.
`thickness`	`number`	`0.35`	Thickness of each cable core.
`rimWidth`	`number`	`0.15`	Width of the soft outline glow around each cable.
`waviness`	`number`	`0.3`	Amount of wavy distortion applied along the tunnel depth.
`sway`	`number`	`0.5`	Strength of the gentle rotational sway of the tunnel.
`size`	`number`	`1.0`	Zoom / scale of the tunnel field.
`centerX`	`number`	`0.0`	Horizontal offset of the vanishing point.
`centerY`	`number`	`0.0`	Vertical offset of the vanishing point.
`glow`	`number`	`1.0`	Intensity of the cable rim glow.
`fadeNear`	`number`	`0.5`	Radius over which the tunnel fades in near the center.
`fadeFar`	`number`	`2`	Radius at which the tunnel fades out toward the edges.
`brightness`	`number`	`1.0`	Overall brightness multiplier of the effect.
`colorVariance`	`boolean`	`true`	Adds subtle per-cable color variation so cables are not uniform.
`grain`	`boolean`	`true`	Adds a whisper-subtle animated film grain to break up banding in the gradients.
`grainIntensity`	`number`	`0.05`	Amplitude of the grain overlay. 0 disables it entirely.
`opacity`	`number`	`1.0`	Global opacity of the rendered tunnel.
`mouseInteraction`	`boolean`	`true`	Enables gentle parallax of the vanishing point toward the pointer.
`mouseStrength`	`number`	`0.1`	Magnitude of the cursor parallax drift.
`lightMode`	`boolean`	`false`	Renders the effect over an opaque white background instead of a transparent one.

Accessibility

Keyboard shortcuts and ARIA behavior.

Purely decorative canvas. Place it behind content with enough contrast.

Light Rays Lightfall