---
title: "WavePath — Free Framer component · Best of Framer"
description: "Free Framer component · by Orxan Qasimov · Effects. How to Use: Place the WavePath component on your canvas."
canonical: "https://framer.elliotli.dev/component/wavepath"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/WavePath

# WavePath

Interactive Elastic Path

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

![WavePath preview image 1](https://framer.elliotli.dev/og/component/wavepath/271c94f0d22585cc/1600x1200.jpg)

## Summary

How to Use: Place the WavePath component on your canvas.

## Description

**Interactive Elastic Physics** This component mimics a real-world rubber band. When you hover over or interact with the line, it stretches dynamically and returns to its original state with a realistic spring animation.

### Key Features:

-   **✨ Dynamic Icon Slot:** You can attach **any icon or element** to the center of the line. Whether it's a heart, a star, or your brand logo, it will move and bounce realistically with the string.
    
-   **Interactive Physics:** High-quality elastic motion with adjustable stiffness and damping for that perfect "snap back" feel.
    
-   **Fully Responsive:** The path automatically adapts to its container width, making it ideal for dividers or hero sections.
    
-   **Highly Customizable:** Change the stroke color, width, and tension directly from the Framer properties panel.
    

### How to Use:

1.  Place the **WavePath** component on your canvas.
    
2.  **Attach your Icon:** Use the property panel to select or upload the icon you want to place on the string.
    
3.  **Tweak the Physics:** Adjust the "bounciness" to make it feel more or less elastic.
    
4.  **Styling:** Change the line color and thickness to match your project's aesthetic.
    

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

-   All · #6351

## Details

- **Author**: Orxan Qasimov
- **Published**: 2026-03-27
- **Updated**: 2026-03-27
- **Added**: 2026-03-15
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo