v1.0.1
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
UI SURECART
BUTTONS
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
Base canvas background color. Dark backgrounds make the raycast beam and gradients stand out dramatically.
Default: #000000
Color of the expanding raycast light point. Brighter colors create more intense luminous effects.
Default: #646464
First gradient stop color at 25% position. Maps to darker luminance areas.
Default: #0C2029
Second gradient stop at 50% position. Primary color for medium brightness.
Default: #F50032
Third gradient stop at 75% position. Light midtone color.
Default: #FF5458
Final gradient stop at 100% position. Maps to brightest luminance creating highlights.
Default: #FFAAA5
Light Beam
Size of the raycast point. Larger creates wider light beam spread. Animates on appear with exponential ease.
Default: 0.842
Animation tempo for beam layer. Higher creates faster pulsing light effects.
Default: 0.25
How much the beam follows mouse movement. 0 keeps it centered, 1 fully tracks cursor with momentum.
Default: 0.1
Balance between linear and squared brightness falloff. Higher creates more concentrated bright center.
Default: 0.5
Rotation angle applied to beam calculation. Creates skewed or elliptical light spread patterns.
Default: 0.0135
Gradient Mapping
Multiplier for gradient cycling speed. Higher creates more color transitions across the luminance range.
Default: 0.45
Phase shift in the gradient animation cycle. Adjusts starting point of color progression.
Default: 0.2
Opacity of gradient color mapping over original luminance. Lower preserves more original brightness values.
Default: 1.0
Noise Distortion
Animation tempo for BCC noise generation. Higher creates faster flowing organic distortion patterns.
Default: 0.11
Size of noise pattern features. Lower creates fine detail, higher creates broad warping.
Default: 0.27
Intensity of coordinate displacement. Higher creates more extreme UV warping and texture distortion.
Default: 0.33
Blinds Effect
Animation tempo for blinds distortion layer. Higher creates faster rippling scan line effects.
Default: 0.5
Number of horizontal distortion bands. Higher creates more frequent, tighter scanline patterns.
Default: 0.25
Intensity of vertical displacement in blinds. Negative creates compression, positive creates stretching effect.
Default: -0.6
Rotation angle for blinds pattern orientation. Changes the direction of scanline distortion bands.
Default: 0.1215
Dithering
Color quantization level for retro dithering. Lower creates more color steps, higher creates harsh posterization.
Default: 0.56
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.
