---
title: "Wave Frame — Free Framer component · Best of Framer"
description: "Free Framer component · by Aathif Thajudeen · Interactive. Elevate your web layouts with Wave Frame, a premium, scroll-driven fluid component for Framer."
canonical: "https://framer.elliotli.dev/component/wave-frame"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Wave Frame

# Wave Frame

Fluid scroll-driven wave frame

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

![Wave Frame preview image 1](https://framer.elliotli.dev/og/component/wave-frame/d7ed95e9eab0b868/1600x1200.jpg)

## Summary

Elevate your web layouts with Wave Frame, a premium, scroll-driven fluid component for Framer.

## Description

Elevate your web layouts with **Wave Frame**, a premium, scroll-driven fluid component for Framer. Designed to break away from rigid grid sections, this element maps highly fluid mathematical curves that react organically to user scroll progress. Engineered with off-screen anchor expansion and hardware acceleration, it delivers a flawless, ultra-smooth editorial motion profile with absolutely zero distortion or awkward lines across all breakpoints.

**Key Properties & Customization Options**

Customize the motion behavior directly from Framer’s right-hand property panel with no coding required:

-   **Wave Color**: Fully compatible with solid hex values, global design system color styles, and theme variables.
    
-   **Top Depth (px)**: Controls the steepness and curvature amplitude of the top boundary wave.
    
-   **Top Speed**: Adjusts how rapidly or subtly the top wave shifts and rolls relative to page scrolling.
    
-   **Top Invert (Toggle)**: Instantly flips the horizontal scrolling direction of the top wave curve.
    
-   **Bottom Depth (px)**: Independently adjusts the boundary amplitude and thickness of the lower wave area.
    
-   **Bottom Speed**: Sets an independent scroll rate for the bottom shape to create custom parallax depth.
    
-   **Bottom Invert (Toggle)**: Flips the wave cycle direction on the bottom boundary.
    

**Performance & Setup Benefits**

-   **100% Fluid Scaling**: Automatically expands to fill any designated parent layout stack box layout seamlessly.
    
-   **Smart Canvas Fallback**: Automatically freezes at a balanced mid-scroll state on your design artboard so you can design content blocks with zero visual guessing.
    
-   **GPU Accelerated**: Employs absolute transform layers to erase vector edge aliasing and sub-pixel stuttering.
    

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

-   All · #4164

## Details

- **Author**: Aathif Thajudeen
- **Published**: 2026-05-30
- **Updated**: 2026-05-30
- **Added**: 2026-05-20
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase