Ocean depth

Ascora reads utilization as ocean depth and cards as sonar columns: each column plunges as far as its balance is drawn, and each plate is a return at one depth interval. oceanDepth builds the row.

Depth is the reading

A column's length is the utilization, and its plates are the intervals that length covers. Nothing about the descent is decorative. A card at nearly zero still shows one return rather than nothing, because an account with no balance is present, not absent — and an empty state is a real state, not a gap.

Fog is the depth cue

The design guide rules out cast shadows and asks for light that radiates from within surfaces, which removes the usual way of showing recession. Scene fog does it instead: geometry dissolves toward a resolved role as it recedes, so the deep goes quiet without anything being shaded from above.

Two things make it work rather than merely compile.

LineMaterial defaults fog to false — it inherits ShaderMaterial's default, while every mesh material defaults to true. Left alone, faces fog and line work does not, which reads as a rendering fault rather than a missing flag. Relief sets it explicitly, so both dissolve together.

Fog distances are authored as offsets from the content centre. Three measures fog from the camera, and in an orthographic isometric view the camera sits a long way back, so raw camera distances would be unauthorable numbers around 2000.

fog: { color: 'bg', near: 10, far: 150 }

Because the colour is a role, fog re-resolves with the theme like everything else — it dissolves into whatever the page background actually is, in either colour scheme.

Toggle it off in the demo. The columns stay legible, but the deep stops receding and the whole reading flattens.

Colour rides the same value

Toggle Colour in the demo. Each column takes a line role from its own utilization, so the worst card reaches brand colour and the quietest stays a pale grey.

oceanDepth(CARDS, { edgeLadder: MAGNITUDE_EDGES })

Two constraints hold this in place. Colour lands on line work and never on a fill, so brand stays the bridge rather than the field and a large flat face never turns into a wash of primary. And the ladder is picked by the same value the geometry already encodes, so it cannot disagree with the shape it is drawn on.

Note what colour is keyed on. Not the plate's depth — the geometry already says that, and a column only has as many plates as it has balance, so keying on depth would tint just the one deepest plate of the worst card and nothing else. Keyed on the card, colour carries the comparison between columns that counting plates makes you work for.

So it is not redundant here, but it can be elsewhere. edgeLadder is opt-in and every geography still defaults to a single border, because colour that repeats what the shape already says is noise.

Install

shadcn add @gesso/relief-ocean