Vectra is an interactive relationship map. Give each vertex a label and a weight, and the app places a single point inside a regular polygon to show their combined balance. You can also drag the point to update the weights in reverse.
You need a current version of Node.js.
-
Open a terminal in this folder.
-
Install the app's dependencies:
npm install
-
Start the app:
npm run dev
-
Open the local address shown in the terminal (normally
http://localhost:5173).
To make a production-ready build instead, run:
npm run buildThe finished static site will be created in the dist folder.
Use the Vertex labels box. Put one name on each line:
Ideas
Time
Budget
Energy
Confidence
The number of lines determines the number of polygon vertices. The tool supports 3 through 12 vertices. You can also use the minus and plus buttons beside Shape size.
Use the Connection weights box with one number per label, in the same order:
10
25
20
30
15
The values do not need to add up to 100. The app automatically normalizes them so the overall total is always 100%.
Drag the glowing point inside the polygon.
- Moving toward a vertex increases that vertex's percentage.
- Moving near the center balances the percentages.
- The point stays inside the polygon.
- The value list updates live as you drag.
This reverse direction uses mean value coordinates, which keeps the displayed percentages smooth, nonnegative, and normalized for triangles through 12-sided polygons.
- Undo:
Ctrl+Zon Windows/Linux orCmd+Zon macOS - Redo:
Ctrl+Shift+Z,Cmd+Shift+Z, orCtrl+Y - Reset: restores the original five equal-weight vertices
A complete drag counts as one undoable action.
- Long vertex labels are shortened on the visualizer so the shape stays readable; their full text remains in the editor.
- Blank or invalid weight lines are handled safely and the app falls back to a valid normalized distribution.
- The interface is desktop-first but stacks into a single-column layout on smaller screens.