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.
✨ 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.
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 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.
✨ 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.
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.
