Wavy Background (WebGL2)
Elevate your Framer layouts with a high-performance, GPU-accelerated WebGL2 wavy background component designed by Karim Saif. Powered by custom procedural shaders, Fractional Brownian Motion (FBM) noise, and fluid domain warping, this component renders rich, dynamic ocean-like visual effects directly on your canvas.
Key Features
GPU-Accelerated Shader Engine: Built with native WebGL2 code delivering fluid visual effects mapped across a rich 20-tone depth gradient.
Instant Presets or Custom Control: Choose from curated presets or switch to Custom mode to unlock granular slider controls right inside the Framer sidebar.
Smart Performance Management: Uses an IntersectionObserver to pause rendering when off-screen, saving device battery and CPU cycles.
Graceful Fallbacks: Automatically defaults to a high-contrast CSS radial gradient on unsupported devices or in lost-context scenarios.
Accessibility Integrated: Respects user prefers-reduced-motion browser settings and includes customizable ARIA labeling.
Built-In Presets
Default Sea: Balanced deep-ocean motion with smooth, medium-speed swirling waves.
Gentle Flow: Soft, slow-moving fluid distortions tailored for subtle background textures.
Fast Storm: High-frequency, energetic movement with intense warp variations.
Subtle Swirl: Soft central vortex movement with smooth color blending.
Custom Property Controls
Zoom Factor: Scale the scale and density of the procedural pattern (0.05 to 2.0).
Base Amplitude & Wave Variation: Adjust the height and random variation of wave domain warping.
Wave Frequency: Control the repetition and tight frequency of wave cycles across the canvas.
Have questions, requests, or feedback? Reach out anytime:
Email: karimsaif010@gmail.com
X (Twitter): @Karim Saif
Wavy Background (WebGL2)
Elevate your Framer layouts with a high-performance, GPU-accelerated WebGL2 wavy background component designed by Karim Saif. Powered by custom procedural shaders, Fractional Brownian Motion (FBM) noise, and fluid domain warping, this component renders rich, dynamic ocean-like visual effects directly on your canvas.
Key Features
GPU-Accelerated Shader Engine: Built with native WebGL2 code delivering fluid visual effects mapped across a rich 20-tone depth gradient.
Instant Presets or Custom Control: Choose from curated presets or switch to Custom mode to unlock granular slider controls right inside the Framer sidebar.
Smart Performance Management: Uses an IntersectionObserver to pause rendering when off-screen, saving device battery and CPU cycles.
Graceful Fallbacks: Automatically defaults to a high-contrast CSS radial gradient on unsupported devices or in lost-context scenarios.
Accessibility Integrated: Respects user prefers-reduced-motion browser settings and includes customizable ARIA labeling.
Built-In Presets
Default Sea: Balanced deep-ocean motion with smooth, medium-speed swirling waves.
Gentle Flow: Soft, slow-moving fluid distortions tailored for subtle background textures.
Fast Storm: High-frequency, energetic movement with intense warp variations.
Subtle Swirl: Soft central vortex movement with smooth color blending.
Custom Property Controls
Zoom Factor: Scale the scale and density of the procedural pattern (0.05 to 2.0).
Base Amplitude & Wave Variation: Adjust the height and random variation of wave domain warping.
Wave Frequency: Control the repetition and tight frequency of wave cycles across the canvas.
Have questions, requests, or feedback? Reach out anytime:
Email: karimsaif010@gmail.com
X (Twitter): @Karim Saif
