Swirling Lines
Create elegant, fluid wave animations that bring depth and motion to your Framer websites.
Swirling Lines is a lightweight, canvas-powered background component that generates smooth animated line patterns in real time. Perfect for hero sections, landing pages, portfolios, SaaS websites, AI products, and premium interfaces, it delivers a modern visual effect while remaining highly performant.
✨ Key Features
Smooth Wave Animation
Creates elegant flowing lines with smooth, natural motion.
Gradient Colors
Blend two colors to match your brand or website.
Performance Optimized
Canvas-powered rendering with viewport detection for smooth performance.
Fully Responsive
Automatically adapts to every screen size and container.
Live Editor Updates
See changes instantly while designing in Framer.
Lightweight
Built with a single HTML Canvas for fast rendering.
Viewport Aware
Pauses animation when off-screen to reduce CPU usage.
Retina Ready
Supports high-resolution displays with adjustable DPR.
─────────────────────
🎛️ Property Controls
Gradient Start & End
Choose the two colors used for the animated gradient.
Line Count
Adjust the number of animated lines.
Thickness
Control the stroke width of each line.
Opacity
Change the transparency of the animation.
Size (Height)
Control how much the waves move vertically.
Wave Count
Adjust the number of wave cycles across the screen.
Speed
Control how fast the animation flows.
Max DPR
Balance image quality and performance.
FPS
Limit the frame rate for better performance.
─────────────────────
🛠️ How to Use
1. Add
Place Swirling Lines inside any frame or section.
2. Resize
Scale it to fit your background or layout.
3. Customize
Adjust the colors and animation settings to match your design.
4. Optimize
Fine-tune Speed, Max DPR, and FPS for the perfect balance of quality and performance.
─────────────────────
💡 Perfect For
AI & SaaS websites • Startup landing pages • Agency websites • Portfolio websites • Hero backgrounds • Product launches • Interactive sections • Premium web experiences
─────────────────────
📦 What's Included
Swirling Lines Framer Component • Full property controls • Responsive canvas rendering • Performance optimizations • Free lifetime updates • Email support
🔄 Refund Policy
Due to the digital nature of this product, all purchases are final and non-refundable.
If you experience any issues or need help integrating the component into your Framer project, feel free to reach out. I'll gladly help you get everything running smoothly.
─────────────────────
❓ Questions & Support
Free lifetime updates & email support.
Questions? Reach out via email integrystudio@gmail.com or on LinkedIn.
Don’t have an account?