✨ Key Features

Smooth Animated Wave System

Generates multiple flowing lines using layered sine wave calculations, creating a mesmerizing swirling motion that continuously evolves.

Beautiful Gradient Colors

Blend between two customizable colors to create premium gradients that perfectly match your brand identity.

Performance Optimized

Built using the HTML Canvas API with viewport detection, ResizeObserver, adjustable FPS controls, and device pixel ratio optimization for consistently smooth performance.

Fully Responsive

Automatically adapts to any frame, section, or screen size while maintaining crisp rendering across desktop, tablet, and mobile devices.

Live Editor Updates

Instantly refreshes inside the Framer editor whenever property controls are adjusted, making experimentation quick and effortless.

Lightweight Canvas Rendering

Draws everything using a single HTML Canvas instead of hundreds of DOM elements, keeping your pages fast and efficient.

Viewport Aware

Automatically pauses rendering when the component leaves the viewport, reducing unnecessary CPU usage and improving overall page performance.

Retina Ready

Supports configurable device pixel ratio (DPR) for crisp visuals on high-resolution displays while allowing you to optimize performance.

🎛️ Property Controls

Gradient Start

Choose the starting color of the animated gradient.

Gradient End

Choose the ending color of the animated gradient.

Line Count

Increase or decrease the number of animated lines to create anything from a subtle background effect to a dense flowing mesh.

Thickness

Adjust the stroke width of every line.

Opacity

Control the transparency of the animation to blend perfectly with your content.

Size (Height)

Adjust the vertical movement of the waves. Lower values create subtle motion while higher values create dramatic flowing patterns.

Wave Count

Control how many wave cycles appear across the width of the component.

Speed

Adjust the animation speed from completely static to energetic flowing motion.

Max DPR

Limit the maximum device pixel ratio to balance rendering quality and performance.

FPS

Choose the maximum rendering frame rate for smoother animation or improved efficiency.

🛠️ How to Use

1. Add the Component

Drag Swirling Lines onto any frame, section, or container in your Framer project.

2. Resize

Resize the component to fit your hero section, page background, cards, banners, or any layout.

3. Customize

Adjust the colors, line count, thickness, opacity, wave size, and wave count to create your preferred visual style.

4. Optimize

Fine-tune the Speed, Max DPR, and FPS settings to achieve the ideal balance between aesthetics and performance.

💡 Perfect For

• AI websites

• SaaS landing pages

• Startup websites

• Agency websites

• Portfolio websites

• Product launches

• Hero sections

• Interactive backgrounds

• Event websites

• Technology brands

• Marketing websites

• Premium digital experiences
  
  

📦 What's Included

• Swirling Lines Framer Component

• Fully customizable property controls

• Responsive canvas rendering

• High-performance animation engine

• Free lifetime updates

• Email support