Atmospheres / effect

Laser Flow

A volumetric light beam with flowing fog, wisps and restrained pointer parallax.

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Preview freely. Unlock the files.

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Component notes

Preserves the complete beam, fog, wisps and optical shader. Demo supplies the negative-space composition; import LaserFlow for your own content.
The primitive fills its parent and requires an explicit container height. Generated usage supplies that height; use a positioned layer when composing with text.
Uniform controls update the existing renderer. Owned elapsed time excludes hidden, offscreen and paused time; replay restarts the phase. Reduced motion uses a stationary render.
DPR and quality are bounded to 0.6–1.5; physical render edges are capped at 4096 pixels. Context loss recovers and GPU failure leaves a static CSS beam.

React 19.2Modern browsersWebGL

React Bits — David Haz · MIT + Commons Clause. Reuse explicitly authorized; see bundled exact notice.

Props

Prop	Type	Default	Description
`color`	string	`"#ff79c6"`	Beam color; accepted ranges and choices are shown in the controls.
`backgroundColor`	string	`'#000000'`	Shader compositing background. Demo and gallery default to #08070c.
`horizontalBeamOffset`	number	`0.1`	Horizontal offset; accepted ranges and choices are shown in the controls.
`verticalBeamOffset`	number	`0`	Vertical offset; accepted ranges and choices are shown in the controls.
`flowSpeed`	number	`0.35`	Flow speed; accepted ranges and choices are shown in the controls.
`verticalSizing`	number	`2`	Vertical size; accepted ranges and choices are shown in the controls.
`horizontalSizing`	number	`0.5`	Horizontal size; accepted ranges and choices are shown in the controls.
`fogIntensity`	number	`0.45`	Fog intensity; accepted ranges and choices are shown in the controls.
`fogScale`	number	`0.3`	Fog scale; accepted ranges and choices are shown in the controls.
`wispDensity`	number	`1`	Wisp density; accepted ranges and choices are shown in the controls.
`wispSpeed`	number	`15`	Wisp speed; accepted ranges and choices are shown in the controls.
`wispIntensity`	number	`5`	Wisp intensity; accepted ranges and choices are shown in the controls.
`flowStrength`	number	`0.25`	Flow strength; accepted ranges and choices are shown in the controls.
`decay`	number	`1.1`	Decay; accepted ranges and choices are shown in the controls.
`falloffStart`	number	`1.2`	Falloff start; accepted ranges and choices are shown in the controls.
`fogFallSpeed`	number	`0.6`	Fog fall speed; accepted ranges and choices are shown in the controls.
`mouseSmoothTime`	number	`0`	Pointer smoothing; accepted ranges and choices are shown in the controls.
`mouseTiltStrength`	number	`0.01`	Pointer tilt; accepted ranges and choices are shown in the controls.
`quality`	number	`1`	Quality; accepted ranges and choices are shown in the controls.
`dpr`	number	`device DPR`	Optional display density override, bounded with quality to 0.6–1.5.
`ariaLabel`	string	`'Laser flow light beam'`	Meaningful label; use an empty string for a decorative layer.
`paused`	boolean	`false`	Stops decorative motion while preserving useful content and interaction.
`replayToken`	number	`0`	Change to restart decorative phase without remounting content; static prints and agent activity retain their state.
`className`	string	`''`	Additional scoped host class.
`style`	CSSProperties	`undefined`	Inline host styles; caller owns container layout.