Wavy Background WebG

Fractional Brownian Motion

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. Support & Feedback Have questions, requests, or feedback? Reach out anytime: Email: karimsaif010@gmail.com X (Twitter): @Karim Saif

Fractional Brownian Motion