WavePath

Show Preview
WavePath

About WavePath

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.