---
title: "Animated Wave Footer — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Sections. Interactive hover effects BG"
canonical: "https://framer.elliotli.dev/component/animated-wave-footer"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Animated Wave Footer

# Animated Wave Footer

Interactive hover effects BG

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

![Animated Wave Footer preview image 1](https://framer.elliotli.dev/og/component/animated-wave-footer/f4ecffa89e3e7114/1600x1043.jpg)

## Summary

Interactive hover effects BG

## Description

**Animated Wave** is a customizable motion component for Framer that transforms a stack of horizontal bars into a fluid, continuously moving wave.

Choose from six carefully tuned presets or switch to **Custom** mode to control the wave physics, shape, speed, amplitude, frequency, direction, phase, spacing, colors, and interaction.

Designed to be lightweight, responsive, and easy to customize directly from Framer's property panel.

### Features

🎛 **Preset System**

-   Classic
    
-   Soft
    
-   Energetic
    
-   Deep
    
-   Minimal
    
-   Pulse
    
-   Custom
    

〰 **Custom Wave Motion**

-   Bar Count
    
-   Amplitude
    
-   Frequency
    
-   Speed
    
-   Wave Shape
    
-   Forward / Reverse direction
    
-   Phase offset
    

〰 **Multiple Wave Shapes**

-   Sine
    
-   Soft
    
-   Triangle
    
-   Square
    

🎨 **Flexible Styling**

-   Solid color mode
    
-   Two-color gradient mode
    
-   Custom background color
    
-   Wave width
    
-   Bar spacing
    
-   Corner radius
    
-   Edge fading
    

🖱 **Interactive Motion** Enable hover interaction to dynamically boost the wave's amplitude and create a more responsive feel.

⚡ **Performance Optimized**

-   RequestAnimationFrame animation
    
-   Viewport-aware animation
    
-   Static-renderer support
    
-   Automatic animation cleanup
    
-   GPU-friendly transforms
    
-   No external dependencies
    

♿ **Accessibility** Add an optional ARIA label when the wave communicates meaningful information, or leave it empty when the animation is purely decorative.

### Support

Need help customizing **Animated Wave** or using it in your Framer project?

I'm happy to help with setup, customization, or troubleshooting.

**X:** [@karimsaif0](https://x.com/karimsaif0?utm_source=chatgpt.com)

**Email:** [**karimsaif010@gmail.com**](mailto:karimsaif010@gmail.com)

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

-   All · #2651

## Details

- **Author**: Karim Saif
- **Published**: 2026-08-17
- **Updated**: 2026-08-17
- **Added**: 2026-08-17
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove