WavePath

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

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: Place the WavePath component on your canvas. Attach your Icon: Use the property panel to select or upload the icon you want to place on the string. Tweak the Physics: Adjust the "bounciness" to make it feel more or less elastic. Styling: Change the line color and thickness to match your project's aesthetic.

Interactive Elastic Path