Areas and technologies
- threejs
- node editor
- typescript
- vite
- Stack
Three.js, Vite and TypeScript
- Interaction
Drag from the palette, connect ports, pan and zoom
A 3D visual node editor: ports, cables and card physics on a pan-and-zoom canvas.
A node editor drawn with Three.js: cards with shadows, thumbnails and bindable fields that lift and move with physics when you interact with them. Output ports connect to input ports by colour, dragging a cable between them.
01
How it works
Nodes are dragged from the palette onto the canvas; each card defines its ports and fields. Lifting a node triggers elevation and physics animation, so the card reacts to the interaction. New node types can be created from the interface itself, defining their ports and types. Dragging a node to the bottom-right corner deletes it; the canvas background pans by dragging and scales with the scroll wheel.
02
In action
Four recordings of the editor: the node and cable structure, creating types from the palette, card physics while dragging, and panning and zooming across the canvas.
Nodes and cables
Palette and node types
Card physics
Pan and zoom