v1.3.3
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
Ether Spire
Creates an ethereal glowing pillar effect using WebGL with custom GLSL shaders. Features ray marching with procedural wave deformation, creating organic flowing light columns. Supports dual-color gradients, adjustable pillar dimensions, and optional mouse interactivity. Includes comprehensive mobile optimization with configurable quality reduction and disable options.
Ether Spire
Move your mouse to rotate the ethereal light pillar.
Colors
Color at the top of the light pillar. Creates a vertical gradient with the bottom color. Supports hex, RGB, and HSL formats.
Default: #5227FF (purple)
Color at the bottom of the light pillar. Blends smoothly with the top color along the pillar height. Supports hex, RGB, and HSL formats.
Default: #FF9FFC (pink)
Appearance
Radial width of the light pillar. Higher values create wider, more expansive columns. Lower values create thin, focused beams.
Default: 3.0
Vertical stretch factor for the pillar. Lower values compress the effect vertically, higher values elongate it. Affects wave deformation scaling.
Default: 0.4
Static rotation angle for the entire pillar in degrees. Use to orient the effect diagonally or at specific angles.
Default: 0
Controls the bloom and glow intensity of the light effect. Higher values create brighter, more diffuse glows. Keep low for subtle effects.
Default: 0.005
Overall brightness multiplier for the effect. Values above 1.0 create overexposed looks, below 1.0 dims the effect.
Default: 1.0
Animation
Speed of the automatic rotation animation when not in interactive mode. Higher values create faster spinning motion. Set to 0 to disable auto-rotation.
Default: 0.3
Enable mouse-controlled rotation. When on, moving the mouse horizontally rotates the pillar around its axis. Replaces automatic rotation with user control.
Default: Off
Effects
Amount of film grain noise applied to the effect. Adds texture and reduces banding artifacts. Set to 0 for clean output.
Default: 0.5
CSS blend mode for compositing the effect over content. Screen works best for light effects on dark backgrounds. Use normal for solid coverage.
Default: screen
Mobile Optimization
Completely disable the effect on mobile devices. Useful for preserving battery life and performance on phones and tablets.
Default: Off
Screen width threshold below which mobile optimizations apply. Also triggers on touch devices regardless of screen size.
Default: 768
Number of ray marching iterations on mobile devices. Desktop uses 100 iterations. Lower values improve performance but reduce visual quality.
Default: 50
Lower pixel ratio and shader precision on mobile for better performance. Disabling keeps full quality but may cause lag on older devices.
Default: On
Performance
This element uses WebGL with custom GLSL fragment shaders implementing ray marching and procedural wave deformation. Features 100 iterations on desktop (50 on mobile) with smooth blending functions and tanh tone mapping. Uses orthographic camera with full-screen quad rendering. Very resource intensive due to per-pixel ray marching calculations - limit to 1 instance per page. Mobile optimization features can significantly improve performance on lower-end devices.