About Node Field

MORE FRAMER COMPONENTS LIKE THIS

✦ Browse +38 FREE + 85 premium components: https://frameze.com/components

✦ Background Bundle: https://frameze.com/components/category/background?ref=bundles

About Node Field

WebGL particle network with repel, attract & connection lines

NodeField is a GPU-accelerated interactive particle network for Framer. Move your cursor to repel or attract thousands of nodes in real time — with optional connection lines that turn your background into a living, breathing network.

Live Preview: https://usenodefield.framer.website/

Built entirely with WebGL for maximum performance. Smooth at any node count, on any screen size.

Effects: Repel mode, Attract mode, Connection Lines network effect

Customization: Node count, color, size, speed, force, influence radius, damping, connection distance, background color

Mobile: Full touch support — tap and drag to interact on phones and tablets

Best used for: Tech and SaaS landing pages that need a dynamic, data-driven aesthetic. Agency and portfolio backgrounds that move without overwhelming the content. Hero sections where a static background feels like a missed opportunity. Creative and generative art installations on the web.

Includes two components: NodeField — production-ready, drop into any page NodeFieldDemo — live control panel to explore all settings in real time

Use Cases

Hero section backgrounds
Interactive landing pages
Tech / SaaS / AI product websites
Portfolio backgrounds
Loading screens
Data visualization aesthetics
Dark-themed UI backgrounds
Creative agency websites

Keywords

particles, particle field, node field, WebGL, interactive, mouse interaction network, graph, dots, connection lines, generative, canvas, dark background, tech, SaaS AI repel, attract, physics motion live