Subtractive design
The graph in the hero of mokujiro.com is an iteration of MokuGraph, the d3 force graph component I sell for Framer. I rebuilt it around what the studio offers instead of every tool I use.
What I changed for this site
- Positions are calculated, not simulated. A pure function puts the hub at the centre and spaces each ring evenly around it, ordered by which parent a node hangs off. The simulation only holds nodes on those targets, so the layout is identical on every load.
- Rings are true circles sized to the shorter side of the frame, so the four arms match in every direction.
- Four tiers, separated by size and opacity. Only the hub and the four entry points are meant to be read; the other 23 show the shape.
- One link per entry point. A second link on one node made the rule invisible, so it came out.
What MokuGraph already does, before you change anything
- Click a node and a drawer opens with the title, description, tags and related nodes, each clickable.
- Side drawer on desktop, narrower on tablet, bottom sheet under 480px. You do not build that three times.
- Touch is handled: pinch to zoom, tap to highlight, tap again to open.
- Every visual property sits in the panel, including the physics: link distance, charge, connection strength, node size.
- D3 is bundled. No runtime network requests, nothing to install.
- 12 templates modelled on real AI architectures, or paste your own JSON.
Two things that cost me a day
- Framer keeps every breakpoint in the DOM and hides the inactive ones, so the same elementId exists three times. Pick the one with a height before you scroll to it.
- A stretched instance can hand your component the string "100%" as its width. Compare that to a number and the check fails silently.
That is the part you are actually buying when you buy a component instead of building one.
The graph in this post: mokujiro.com
The component: mokujiro.com/products/mokugraph
