---
title: "InteractiveFlowLines — Free Framer component · Best of Framer"
description: "Free Framer component · by Duvi · Sections. Usage Simply drag the InteractiveFlowLines component onto your Framer canvas."
canonical: "https://framer.elliotli.dev/component/interactiveflowlines"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/InteractiveFlowLines

# InteractiveFlowLines

[View on Framer](https://framer.com/marketplace/components/interactiveflowlines/?via=elliot-li)

![InteractiveFlowLines preview image 1](https://framer.elliotli.dev/og/component/interactiveflowlines/1253de906ce7df4b/1600x1200.jpg)

## Summary

Usage Simply drag the InteractiveFlowLines component onto your Framer canvas.

## Description

**Interactive Flow Lines** is a highly customizable, high-performance React component for Framer. It renders a dynamic array of lines that react organically to mouse movement. Whether used as a subtle background texture or a bold interactive hero element, it adds a layer of sophisticated, fluid motion to your interface.

**Key Features**

-   **Dynamic Interaction:** Lines expand and change color based on proximity to the cursor, creating a magnetic, wave-like effect.
    
-   **Dual Interaction Modes:**
    
    -   **Local:** Interaction is contained within the component's bounding box (perfect for cards or specific sections).
        
    -   **Screen (Global):** The component reacts to the mouse position anywhere on the screen, allowing for immersive background effects.
        
-   **Animation & Scrolling:** Includes a built-in scrolling animation engine to create a continuous flow, with adjustable speed and direction.
    
-   **High Performance:** Built using the HTML5 <canvas> API to ensure smooth 60fps rendering, even with hundreds of lines.
    
-   **Fully Customizable:** Control every aspect via the Framer UI, including gap size, line thickness, length interpolation, colors, and cap styles.
    

**Usage**

Simply drag the InteractiveFlowLines component onto your Framer canvas. Adjust the **Direction** to fit your layout (vertical lines for horizontal flows, horizontal lines for vertical stacks). Use the **Radius** and **Max Len** controls to dial in the intensity of the interaction.

For a subtle background effect, set **Base Len** to a small value, **Color** to a low opacity, and enable **Scroll**. For a bold interactive header, increase the **Thickness** and use contrasting **Hover Colors**.

## Rank history [How rankings work →](/terms#rankings)

-   All · #3065

## Details

- **Author**: Duvi
- **Published**: 2025-12-04
- **Updated**: 2026-01-12
- **Added**: 2025-11-30
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove