Your system asks for reduced motion, so VFX-JS draws nothing. Demos on this site show plain HTML.

Type

LightStreakParams

effects/src/light-streak.ts:206 ↗
import type { LightStreakParams } from "@vfx-js/effects";

Properties

angle

angle: number

Base rotation of the ray fan, in degrees.

density

density: number

Source sampling grid dimension (instance count = density²). Higher resolves finer highlights, lets streaks be thinner without banding, and costs more vertex work (most instances are culled, so fragment cost stays tied to highlight count).

dispersion

dispersion: number

Chromatic dispersion, -1..1. Gives each channel a different reach so the streak fringes through colour toward its tip. +1 lets red persist furthest (warm tip, like aperture diffraction); -1 lets blue persist (cool tip, refractive look); 0 is achromatic.

falloff

falloff: number

Exponential length fade decay rate. Higher concentrates the brightness into a tighter core near the source and trails a fainter tail; lower flattens toward an even streak.

fringe

fringe: number

Diffraction fringe contrast, 0..1. Periodic brightness modulation along the streak whose period scales with wavelength, so bands converge to white at the source and separate into rainbow further out. Distinct from dispersion (a monotone tip-ward shift); 0 disables it.

fringeCount

fringeCount: number

Fringes along the streak (green channel reference); fractional.

highlightClamp

highlightClamp: number

Upper clamp on source highlight brightness (Blender's highlight "Maximum"), so blown-out sources don't dominate the accumulation. Floored to just above threshold; lower values have no extra effect.

intensity

intensity: number

Streak brightness. Drives a soft-saturating tone map (1 - exp(-acc * intensity)), so raising it brightens without clipping accumulated highlights to white.

length

length: number

Max streak length in CSS (logical) px.

pad

pad: number | "fullscreen"

Extra pad around the element in CSS px so streaks aren't clipped at the element edge. Should be ≥ length. "fullscreen" reaches the viewport edges.

resolution

resolution: number

Accumulation buffer resolution relative to the output, 0..1. Streaks are soft, so 0.5 looks nearly identical and cuts GPU bandwidth to a quarter. 1 accumulates at full resolution.

streaks

streaks: number

Number of rays. 2 → a single horizontal axis (anamorphic flare); n → an n-pointed aperture starburst.

threshold

threshold: number

Highlight cutoff in [0,1]. Only highlights above this throw streaks.

tint

tint: readonly [number, number, number]

Per-channel multiplier on the streak colour.

width

width: number

Streak width in CSS (logical) px — the gaussian cross-section of each streak. Thinner than the sampling grid cell and the streak breaks into stripes; raise density for thin-yet-continuous streaks.