---
title: "Node Field — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Ahmet Loca · Backgrounds. Node Field WebGL particle network with repel, attract & connection lines NodeField is a GPU-accelerated interactive particle…"
canonical: "https://framer.elliotli.dev/component/node-field"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Node Field

# Node Field

WebGL particle network, repel

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

![Node Field preview image 1](https://framer.elliotli.dev/og/component/node-field/702c5addd1bc3ba1/1600x1200.jpg)

## Summary

Node Field WebGL particle network with repel, attract & connection lines NodeField is a GPU-accelerated interactive particle network for Framer.

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

**✦ Background Bundle:** [**https://frameze.com/components/category/background?ref=bundles**](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/**](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

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

-   All · #2475

## Details

- **Author**: Ahmet Loca
- **Price**: $4.00
- **Published**: 2026-06-05
- **Updated**: 2026-09-30
- **Added**: 2026-06-05
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background