v1.3.3
MENU ANIMATIONS
ADVANCED EFFECTS
CORE BACKGROUND
Chroma Silk
Creates flowing chromatic silk effects using WebGL with custom GLSL shaders. Features procedural warp distortion, multi-color gradients up to 8 stops, mouse-driven interaction with parallax, auto-rotation, and film grain noise. Supports transparency mode for layering over content and comprehensive mobile optimization with configurable FPS and pixel ratio.
Chroma Silk
Move your mouse to interact with the flowing silk effect.
Colors
Color palette for the silk effect. Pass as JSON array of hex color strings. Each color creates a distinct layer in the chromatic blend. If no colors provided, defaults to RGB channel separation effect.
Default: ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96e6a1"]
Enable transparent background mode. When on, the effect composites over content with alpha transparency based on color intensity. When off, renders on solid black background.
Default: Off
Appearance
Zoom level of the silk pattern. Lower values zoom in for larger, smoother shapes. Higher values zoom out for more intricate, detailed patterns.
Default: 1
Wave frequency of the silk distortion. Higher values create more ripples and complex folding patterns. Lower values produce smoother, gentler waves.
Default: 1
Intensity of the procedural warp distortion. At 0, minimal warping. At 1, standard silk-like flowing. Above 1, increasingly dramatic and abstract deformations.
Default: 1
Film grain noise overlay intensity. Adds subtle texture and analog feel to the effect. Set to 0 for clean, smooth output.
Default: 0.1
Initial rotation angle of the silk pattern in degrees. Changes the orientation of the flowing direction.
Default: 45
Animation
Animation speed multiplier for the flowing motion. Lower values create slow, hypnotic movement. Higher values produce faster, more energetic flow.
Default: 0.2
Automatic rotation speed in degrees per second. Positive values rotate clockwise, negative counter-clockwise. Set to 0 to disable auto-rotation.
Default: 0
Interaction
How strongly the mouse position affects the silk distortion. At 0, no mouse interaction. Higher values create more pronounced displacement toward the cursor.
Default: 1
Parallax offset based on mouse position. Creates a subtle depth effect as if the silk is floating in 3D space. Works independently from mouse influence.
Default: 0.5
Mobile Optimization
Completely disable the effect on mobile devices. The container will remain empty, allowing CSS fallback backgrounds to show through.
Default: Off
Maximum pixel ratio on mobile devices. Lower values reduce resolution for better performance. 1 uses native resolution, 0.5 renders at half resolution.
Default: 1
Target frame rate on mobile devices. Lower values save battery and reduce heat. 30 is a good balance between smoothness and performance.
Default: 30
Performance
This element uses WebGL with Three.js and custom GLSL fragment shaders. Features per-pixel procedural warp calculations with exponential falloff, multi-layer color blending with up to 8 color stops, real-time noise generation, and smooth pointer interpolation. Uses ResizeObserver for responsive sizing and sRGB color space output. Very resource intensive due to complex per-pixel math - limit to 1 instance per page. Mobile optimization allows reducing resolution and frame rate for better battery life.