v1.3.3
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
Silk Horizon
Creates elegant flowing wave lines using WebGL with custom GLSL shaders. Features three independent wave layers (top, middle, bottom) with configurable line counts, positions, and rotations. Supports multi-color gradients up to 8 stops, mouse-driven bend interaction, parallax movement, and comprehensive mobile optimization with quality presets.
Silk Horizon
Move your mouse to bend the flowing silk waves.
Colors
Color palette for the wave lines. Separate colors with | symbol. Lines interpolate through these colors creating smooth gradients. Supports hex, RGB, and HSL formats.
Default: #ff6b6b|#4ecdc4|#45b7d1|#96e6a1
CSS blend mode for compositing the waves over content. Screen creates glowing effects on dark backgrounds. Use normal for solid coverage.
Default: screen
Top Wave Layer
Show or hide the top wave layer. Disabling reduces visual complexity and improves performance.
Default: On
Number of wave lines in the top layer. More lines create denser patterns but increase GPU load.
Default: 6
Spacing between lines in the top layer. Higher values spread lines further apart.
Default: 5
Horizontal offset of the top wave pattern. Adjusts where the wave phase begins along the X axis.
Default: 10.0
Vertical position of the top wave layer. Positive moves up, negative moves down.
Default: 0.5
Rotational distortion applied to the top layer based on distance from center. Creates spiral-like warping effects.
Default: -0.4
Middle Wave Layer
Show or hide the middle wave layer. This is the primary, most visible layer.
Default: On
Number of wave lines in the middle layer. The middle layer has full brightness compared to other layers.
Default: 6
Spacing between lines in the middle layer.
Default: 5
Horizontal offset of the middle wave pattern.
Default: 5.0
Vertical position of the middle wave layer.
Default: 0.0
Rotational distortion for the middle layer.
Default: 0.2
Bottom Wave Layer
Show or hide the bottom wave layer. This layer renders at 20% brightness for subtle depth.
Default: On
Number of wave lines in the bottom layer.
Default: 6
Spacing between lines in the bottom layer.
Default: 5
Horizontal offset of the bottom wave pattern.
Default: 2.0
Vertical position of the bottom wave layer.
Default: -0.7
Rotational distortion for the bottom layer.
Default: -1.0
Animation
Global speed multiplier for all wave animations. Higher values create faster, more energetic movement. Lower values produce calm, slow-flowing waves.
Default: 1.0
Interaction
Enable mouse-driven wave bending. When on, waves bend toward or away from the cursor position.
Default: On
Size of the mouse influence area. Lower values create tighter, more localized bending. Higher values affect a wider area around the cursor.
Default: 5.0
Direction and intensity of the bend effect. Negative values push waves away from cursor, positive values pull toward cursor.
Default: -0.5
Smoothness of mouse tracking. Lower values create slower, more fluid following. Higher values make interaction more responsive and snappy.
Default: 0.05
Parallax
Enable parallax movement based on mouse position. Creates a subtle depth effect as if viewing through a window.
Default: On
Amount of parallax offset. Higher values create more pronounced movement relative to mouse position.
Default: 0.2
Mobile Optimization
Completely disable the effect on mobile devices. Shows a solid color fallback using the first gradient color instead.
Default: Off
Quality preset for mobile devices. Adjusts line count multiplier and pixel ratio. Full uses 100% lines with 2x DPI. Low uses 25% lines with 0.5x DPI.
Default: medium
Disable bend interaction and parallax on mobile devices. Keeps animation running but removes touch-based effects for better performance.
Default: On
Performance
This element uses WebGL with Three.js and custom GLSL fragment shaders. Features up to 36 wave lines across three layers with real-time sinusoidal wave calculations, rotational distortion, and mouse-driven deformation. Uses IntersectionObserver to pause rendering when off-screen. Very resource intensive due to per-pixel wave calculations - limit to 1 instance per page. Mobile optimization presets can significantly reduce GPU load on lower-end devices.