Wavy Background WebG

Fractional Brownian Motion by Karim Saif

Show Preview
Wavy Background WebG

About Wavy Background WebG

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: