Graph Canvas

An interactive force-directed node graph

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

An interactive force-directed node graph