---
title: "Wavy Background WebG — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Backgrounds. Fractional Brownian Motion"
canonical: "https://framer.elliotli.dev/component/wavy-background-webg"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Wavy Background WebG

# Wavy Background WebG

Fractional Brownian Motion

[View on Framer](https://framer.com/marketplace/components/wavy-background-webg/?via=elliot-li)

![Wavy Background WebG preview image 1](https://framer.elliotli.dev/og/component/wavy-background-webg/c7127b05e96425d2/1600x1059.jpg)

## Summary

Fractional Brownian Motion

## Description

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](mailto:karimsaif010@gmail.com)
    
-   **X (Twitter):** [@Karim Saif](/community/creator/@karim-saif/)
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #5522

## Details

- **Author**: Karim Saif
- **Published**: 2026-08-10
- **Updated**: 2026-08-10
- **Added**: 2026-08-10
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background