Spatial Wireframe

Spatial Wireframe

A dynamic 3D structure you can actually reshape. Grab any vertex and drag it through space — the mesh deforms in real time while keeping all its connections intact. Release, and the structure continues drifting naturally from its new position.

How it works

Vertices are positioned on a Fibonacci sphere and projected into 2D using Y-axis rotation, tilt, and perspective divide. Every frame, the component computes the minimum spanning tree of the current vertex positions, then layers in additional edges based on the "connection density" property — always ensuring each vertex has at least three supporting edges. Dragging is handled via pointer capture, and offsets persist across frames.

Key Features

- Draggable vertices — click and drag any node to reshape the structure

- Smart edge detection — connections recalculated every frame

- Vertex highlight — nodes brighten as your cursor approaches them

- 3D projection with depth — perspective divide and Y-axis rotation

- 16 exposed properties

Properties

- Vertex count — 4 to 30 nodes

- Node spacing & drift amplitude

- Node size & line width

- Structure width & height

- Connection density

- Twist, rotation, tilt

- Motion speed & glow intensity

- Pointer range & highlight intensity

Best for

Interactive hero sections, agency sites, tech product pages, and creative portfolios.