“Wobbly Line”
An interactive line that creates a rubber band-like effect when users hover over it. The line smoothly springs back to its original position when released, creating a playful element.
Component Details
Instructions
Copy and paste the component into your Framer project, then adjust the property controls in the right panel to customize and configure it for your website.
About
An interactive and playful line component that responds to mouse movement with smooth, elastic animations. Perfect for creating engaging dividers, decorative elements, or interactive backgrounds in your Framer projects.
✨ Key Features
- Interactive Animation: Line smoothly follows mouse movement with spring physics
- Orientation Options: Choose between vertical or horizontal line orientation
- Elastic Behavior: Natural, physics-based movement with customizable spring properties
- Smooth Initial Animation: Beautiful draw-in animation when the component first appears
- Responsive Design: Automatically adapts to any container size
💡 Pro Tips
- Adjust the Grab Threshold to control how easily users can interact with the line
- Fine-tune the Release Threshold to determine how far the line can stretch
- Experiment with different spring settings to achieve the perfect wobble effect
- Use multiple instances with different colors to create layered interactive effects
- Combine with other elements to create interactive separators or decorative backgrounds
🎨 Styling Options
- Line Properties: Color and stroke width customization
- Animation Settings: Configurable spring physics and initial draw-in animation
- Interaction Zones: Adjustable grab and release thresholds
- Orientation: Toggle between vertical and horizontal layouts
This component adds a touch of playful interactivity to your Framer projects, perfect for creating engaging user experiences without any coding required. The smooth, physics-based animations and easy customization options make it an excellent choice for modern, interactive web designs.
While the component offers delightful mouse-based interactions on desktop, it gracefully falls back to a simple line on mobile and tablet devices where touch events are the primary input method.
This Framer component was inspired by Fancy Components's component 🤝
We appreciate Fancy Components efforts in creating open-source react components, which allows us to "Framerize" and offer them to the Framer community.
Need a custom Framer component that goes beyond what's possible on the canvas? We'll create the custom code solution for you! Sky is the limit. Request a custom component here.
You may also like...
“Frequently” Asked Questions
Get answers to common questions about the Bachoff custom code Framer components.
“What are custom code Framer components?”
Custom code components are advanced elements built for Framer that enhance its default capabilities, allowing designers to implement features like 3D mockups, generators, and dynamic charts.
“Do I need coding knowledge to use custom code components?”
No coding knowledge is required! Our components are designed to be plug-and-play, but they also allow for further customization if you have coding skills.
“What types of components do you offer?”
We offer a variety of components, including 3D laptop mockups, PFP and MEME generators, charts (line, bar, pie, donut), sliders, calculators, and UI elements like cards and compare cards.
“How do I install a custom code component in Framer?”
Installation is straightforward! Usually it's just a matter of copying and pasting the code into your Framer project. You'll receive step-by-step instructions with each component, including how to integrate it into your Framer project.
“Are the components compatible with all Framer projects?”
Yes, our components are fully compatible with any Framer project. If you face any compatibility issues, our team is here to help.
“What's the difference between free, pro, and elite components?”
Free components offer basic functionality, while pro and elite components include more advanced features and customization options, catering to professional and enterprise-level needs.
“Can I request a custom-built component?”
Absolutely! We specialize in creating custom solutions tailored to your specific needs. Contact us for a quote and delivery timeline.
“Sign up” for the newsletter_
Get notifications about the latest Framer components or templates from BACHOFF Studio directly to your inbox.
“Contact”
“Policies”
©2025 BACHOFF Studio
All Rights Reserved