“Curvie”
Add smooth, scroll-based image curves to your Framer projects with this eye-catching distortion effect.
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
A mesmerizing image distortion component that adds smooth, velocity-based curvature animations to your images as users scroll. Perfect for creating engaging hero sections, image galleries, or any scroll-driven visual experiences in your Framer projects.
✨ Key Features
- Scroll-Driven Animation: Smooth, physics-based image distortion that responds to scroll velocity
- WebGL-Powered: High-performance image rendering using WebGL2 for butter-smooth animations
- Responsive Design: Automatically adapts to any container size while maintaining image proportions
- Smart Image Scaling: Implements 'cover' behavior to ensure images fill the container perfectly
- Customizable Border Radius: Add rounded corners with pixel-perfect anti-aliasing
- Color Tinting: Apply dynamic color overlays that respond to scroll movement
💡 Pro Tips
- For the best scrolling experience, combine with Lenis Smooth Scroll
- Match your image aspect ratio with the frame aspect ratio for optimal curvature animation
- Increase the "Space for Curvature" value when using higher intensity settings
- Use images with clear focal points in the center for the most striking effect
- Experiment with color tinting to add depth and visual interest to monochrome images
- Keep intensity values between 2-8 for subtle, professional animations
🎨 Styling Options
- Image: Upload any image or use responsive image variants
- Intensity: Control the strength of the curvature effect (0-20)
- Border Radius: Add rounded corners (0-1000px)
- Space for Curvature: Adjust inner scaling to accommodate the distortion effect
- Color Tint: Customize overlay color and intensity for dynamic effects
⚠️ Important Notes
Aspect Ratio Matching: For optimal curvature animation, ensure that the aspect ratio of your original image closely matches the aspect ratio of the rendered frame. For example, if you use a horizontal 16:9 image but render it in a 9:16 frame, you may notice additional vertical image shifting.
This component brings professional-grade scroll animations to your Framer projects without requiring any WebGL knowledge, while maintaining the flexibility to customize every aspect of the effect to match your design needs.
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