Interaction Lines BG

Interactive Lines Background for Framer

Bring fluid, dynamic canvas motion and interactive wave patterns to your Framer websites. Created by Karim Saif, Reactive Lines renders continuous, mathematical vector curves that deform, react, and flow in real time based on user cursor movement, touch input, and idle state behaviors.

🌌 What It Does

👁 Interactive Canvas & Wave Dynamics

• Fluid Cursor & Touch Reactivity: Responds dynamically to mouse velocity and touch events with customizable interpolation speed, dynamic line deformation, and active cursor influence radii.

• Smart Idle & Mobile Modes: Features automatic orbit animations during user inactivity and tailored behaviors for touch displays (Follow Touch, Auto-Orbit, or Center Lock).

• Procedural Curve Geometry: Generates custom vector paths using mathematical noise algorithms across multiple directional axes (Vertical, Horizontal, Diagonal, and Reverse).

🎨 Visual Styling & Atmospheric FX

• Custom Line Distributions: Adjust line counts, global stroke width, curve tension, and non-linear spacing models (Linear, Quadratic, Exponential, Logarithmic).

• Vignette & Blend Modes: Fine-tune scene aesthetics with hardware-accelerated CSS blend modes, stroke opacity controls, and built-in radial vignette fading.

• Dynamic Color Engine: Full control over foreground stroke colors and background transparency for seamless site integration.

⚡ Responsive & Optimized Architecture

• Performance-First Rendering: Utilizes IntersectionObserver to automatically pause animation loops when off-screen, conserving CPU and GPU usage.

🚀 Best Used For

🎨 Creative agency hero sections & dynamic page backgrounds

💻 Interactive developer portfolios & tech landing pages

✨ Ambient visual banners & modern web app canvases

🔮 Immersive brand showcases & interactive UI experiences

Made with 💛 by @Karim Saif for Framer Marketplace

Does this capture all the features of your component, or would you like to adjust any specific sections?