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.
Duvi
