Iso Prototype — baki.io

Iso Prototype

Header rebuilt as a top-down miniature topology

Domain
tools
Archetype
build
Audience
builder
Date
Tech
SVG, Preact, Isometric projection

Floating modules with depth equal to their shadow height — viewed from a near-orthographic top angle so the page stays readable.

A canvas-resident sandbox for the isometric depth treatment we’ve been prototyping. Every chip / button / module is a tiny extruded block on a near-orthographic floor — depth equal to what its CSS drop shadow used to be, but expressed as physical geometry instead of a soft blur.

The view sits close to top-down rather than full 30° isometric. The floor reads as nearly flat so labels and text remain comfortable to read; block heights still extrude UP visibly. Hovering any block lifts it: the cast shadow stretches in the light direction, peer blocks dim to focus your eye. As you scroll, the iso band’s vertical scale modulates with the prototype’s position in the viewport — corner blocks (farther from origin) register that modulation more than central ones, delivering “more depth at the corners as I scroll” without per-block parallax math.

Two sliders sit on the prototype itself: depth drives block heights, light angle sweeps the cast shadow direction. Substrate (paper / void) is not a slider — it tracks the page register automatically via a MutationObserver on <html data-register>, same pubsub the SiteShadow widget uses. Flip the AmbientEngine to night and the floor + palette swap in lockstep with the rest of the canvas.