WavePath — Interactive Elastic Path

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.