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
Drop the component into your Framer project and size the frame however you like.
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
The first node in the list is treated as the main node.All other nodes connect to it automatically.
The graph will automatically initialize, settle into place, and become interactive.
-----------------------------------------------
Included Interactions
Users can click and drag any node freely.
Nodes move with soft spring behavior for a natural, fluid feel.
Nodes resist getting too close and gently push apart.
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
Nodes can visually move beyond the frame edge, but they are gently pulled back in instead of getting harshly clipped.
-----------------------------------------------
Customizable Properties
Add and reorder your custom node layers.
Sets the background of the graph container.
Controls the connector line color.
Adjusts how visible the connector lines are.
Controls connector stroke thickness.
Controls how faded non-hovered nodes/lines become on hover.
Controls how far nodes tend to sit from the primary node.
Controls how tightly the graph holds together.
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