5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T14d6,

Details

Create interactive, physics-based node layouts in Framer using your own layers as draggable nodes.This component automatically connects all nodes to a primary node, adds smooth spring motion, prevents chaotic overlap, and keeps the layout feeling alive and responsive.

It’s ideal for:

Relationship maps
Portfolio skill maps
Team / org visualizations
Site navigation experiments
Interactive storytelling
Product ecosystem diagrams

Unlike static graph layouts, this component feels playful, tactile, and alive — while still staying visually controlled.-----------------------------------------------

How It Works

The first node in your Nodes list becomes the primary / central node
Every other node connects to it automatically
Nodes can be dragged freely
When released, they settle naturally using spring-based motion
Nodes gently avoid overlapping
If dragged too far outside the frame, they glide back in
Hovering a node dims unrelated nodes and lines for better focus

-----------------------------------------------

How To Use

1. Add the component to your canvas

Drop the component into your Framer project and size the frame however you like.

2. Add your node layers

Use the Nodes property to insert your own Framer layers/components.

Each item can be:

text cards
buttons
tags
icons
mini content blocks
custom UI cards

3. Arrange node priority

The first node in the list is treated as the main node.All other nodes connect to it automatically.

4. Publish / preview

The graph will automatically initialize, settle into place, and become interactive.

-----------------------------------------------

Included Interactions

Draggable Nodes

Users can click and drag any node freely.

Physics-Based Motion

Nodes move with soft spring behavior for a natural, fluid feel.

Smart Collision Spacing

Nodes resist getting too close and gently push apart.

Hover Focus

Hovering over a node:

keeps the hovered node fully visible
keeps the primary node fully visible
keeps the connecting line visible
dims unrelated nodes and lines

Soft Boundary Behavior

Nodes can visually move beyond the frame edge, but they are gently pulled back in instead of getting harshly clipped.

-----------------------------------------------

Customizable Properties

Nodes

Add and reorder your custom node layers.

Background Color

Sets the background of the graph container.

Line Color

Controls the connector line color.

Line Opacity

Adjusts how visible the connector lines are.

Line Width

Controls connector stroke thickness.

Dim Opacity

Controls how faded non-hovered nodes/lines become on hover.

Spring Length

Controls how far nodes tend to sit from the primary node.

Spring Strength

Controls how tightly the graph holds together.

Damping

Controls how quickly motion settles after movement.

-----------------------------------------------

Best Practices

Use consistent card sizes for a cleaner visual rhythm
Keep the primary node visually stronger than the rest
Works best with 4–12 nodes
Leave enough empty space around the graph for motion
Use hover dimming to create guided exploration

-----------------------------------------------

Good Use Cases

This component works especially well for:

About pages
- skills, tools, strengths, roles
Portfolio case studies
- process maps, systems, frameworks
Startup / product sites
- ecosystem or feature relationships
Interactive storytelling
- concepts, themes, character maps
Navigation experiments
- playful sitemap-style interfaces

-----------------------------------------------

Notes

This component is designed for interaction-first layouts, not strict data visualization
Node positions are physics-driven, so layouts will feel organic rather than rigid
Best used when you want a graph that feels alive, not mechanical

5a:[["$","$L5d",null,{"post":{"id":"019d6c98-ca03-7d2e-a23b-74ee19c532ef","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","slug":"nitin-sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"ofEsr9SfKetpelnm6nnp","resolved":true,"title":"Graph Canvas","body":"$5e","bodyJson":null,"introduction":"An interactive force-directed node graph","slug":"graph-canvas","author":{"framerUserId":"72406c5b-eb57-4fe8-a22c-20d8aee6f952","name":"Nitin Sangwan","slug":"nitin-sangwan","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/71895/avatar-wMSuRkDk8WeDyHl1x0Mj8orrVFpBiN.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ofEsr9SfKetpelnm6nnp/graph-canvas-Ujhnm5EIBpOjmzRCC66CJCDwxnmEMc","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-27T12:21:08.210Z","updatedAt":"2026-04-08T07:36:37.434Z","publishedAt":"2026-04-08T10:17:25.763Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://interactive-nodes.framer.website","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_EUgMb2WFjTakJlpUkW1ScXpoJpJnwS5f1M0lY1b7DTp","workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"KyRx0von6FdjiBncj1TD","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":19,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-08T10:17:25.763Z","updatedAt":"2026-04-08T10:17:25.763Z","reported":false}}],"$L5f"]

Suggested for you