BLACK FRIDAY
20% OFF Lifetime · Ends Dec 2nd
Raycast - Bricksfusion
HEAVY

Raycast

Creates expanding light beam effects with animated gradient mapping, procedural noise distortion, and retro dithering. Features dynamic raycast point with smooth appear animation, Oklab color interpolation, BCC noise derivatives, and customizable blinds distortion.

Raycast

Watch the expanding light beam with animated gradient colors.

Appearance

Background Color color picker

Base canvas background color. Dark backgrounds make the raycast beam and gradients stand out dramatically.

Default: #000000

Beam Color color picker

Color of the expanding raycast light point. Brighter colors create more intense luminous effects.

Default: #646464

Gradient Color 1 color picker

First gradient stop color at 25% position. Maps to darker luminance areas.

Default: #0C2029

Gradient Color 2 color picker

Second gradient stop at 50% position. Primary color for medium brightness.

Default: #F50032

Gradient Color 3 color picker

Third gradient stop at 75% position. Light midtone color.

Default: #FF5458

Gradient Color 4 color picker

Final gradient stop at 100% position. Maps to brightest luminance creating highlights.

Default: #FFAAA5

Light Beam

Beam Radius 0.1-2.0

Size of the raycast point. Larger creates wider light beam spread. Animates on appear with exponential ease.

Default: 0.842

Beam Speed 0.1-2.0

Animation tempo for beam layer. Higher creates faster pulsing light effects.

Default: 0.25

Mouse Tracking 0.0-1.0

How much the beam follows mouse movement. 0 keeps it centered, 1 fully tracks cursor with momentum.

Default: 0.1

Brightness Mix 0.0-1.0

Balance between linear and squared brightness falloff. Higher creates more concentrated bright center.

Default: 0.5

Beam Rotation 0.0-1.0

Rotation angle applied to beam calculation. Creates skewed or elliptical light spread patterns.

Default: 0.0135

Gradient Mapping

Cycle Amount 0.1-2.0

Multiplier for gradient cycling speed. Higher creates more color transitions across the luminance range.

Default: 0.45

Time Offset 0.0-1.0

Phase shift in the gradient animation cycle. Adjusts starting point of color progression.

Default: 0.2

Gradient Mix 0.0-1.0

Opacity of gradient color mapping over original luminance. Lower preserves more original brightness values.

Default: 1.0

Noise Distortion

Noise Speed 0.0-2.0

Animation tempo for BCC noise generation. Higher creates faster flowing organic distortion patterns.

Default: 0.11

Noise Scale 0.1-2.0

Size of noise pattern features. Lower creates fine detail, higher creates broad warping.

Default: 0.27

Noise Strength 0.0-1.0

Intensity of coordinate displacement. Higher creates more extreme UV warping and texture distortion.

Default: 0.33

Blinds Effect

Blinds Speed 0.1-2.0

Animation tempo for blinds distortion layer. Higher creates faster rippling scan line effects.

Default: 0.5

Divisions 0.0-1.0

Number of horizontal distortion bands. Higher creates more frequent, tighter scanline patterns.

Default: 0.25

Distortion Amount -2.0 to 2.0

Intensity of vertical displacement in blinds. Negative creates compression, positive creates stretching effect.

Default: -0.6

Blinds Rotation 0.0-1.0

Rotation angle for blinds pattern orientation. Changes the direction of scanline distortion bands.

Default: 0.1215

Dithering

Dither Threshold 0.1-1.0

Color quantization level for retro dithering. Lower creates more color steps, higher creates harsh posterization.

Default: 0.56

Dither Mix 0.0-1.0

Opacity of dithering effect. Lower preserves smooth gradients, higher adds more retro pixel aesthetic.

Default: 0.32

Performance

This element uses WebGL2 with multiple custom GLSL shaders in sequence. Implements BCC noise derivatives for procedural distortion, Oklab color space interpolation for perceptually uniform gradients, tanh tonemapping, gradient mapping with luminance analysis, multi-pass coordinate distortion with differential antialiasing, and blue noise dithering. Features animated appear state with exponential easing. Requires UnicornStudio.js library (automatically loaded). Very resource intensive - limit to 1 instance per page. Not recommended for mobile devices due to GPU shader complexity and continuous 60fps rendering.