Letting the conversation breathe

A personal forest has had three ways to be read: Canvas, Chronicle, Constellation. This week a fourth joined them — a Tree. The whole conversation as a navigable shape.

The shape

The Tree draws the conversation as a fixed spatial layout. Every reply hangs from whatever it replies to. Every dense branch gets its own slice of the circle. Every leaf is one dot. Pinch to fly between the broad overview and a single exchange. Tap a branch to expand it. Long-press anything to peek at it without moving.

The design started as a runnable prototype — a phone in a browser, all the gestures wired up. The shipping surface mirrors it.

The brainstorm — pinch to zoom · tap a frond to expand · long-press a node for the preview

What “alive” means here

The moment a new reply lands somewhere in the tree, a short edge draws itself from the parent into place, with a pale-amber pulse travelling along it. The new node blooms in. The surrounding branch glows briefly — a sunlight halo whose brightness decays with how recently anything touched it.

There is ambient motion too — the whole tree rotates slowly, the canopy breathes. Slow enough not to compete with reading, quick enough that the surface never feels static. Roots you create yourself get a sunlight shaft behind them; replies from people in your inner circle wear a brighter ring. The visual vocabulary is the rest of the product’s — sunlight rare, green the default, light the way the surface tells you what is happening.

Some of the test conversations grew past seven thousand nodes. The tree still glides at a pinch.

Tech notes

Drawing a thousand glowing dots without thrashing the UI thread.

Per-frame animation in a JavaScript runtime cannot go through the JavaScript runtime — the bridge between JS and the native UI thread is where dropped frames come from. Modern React Native handles this with shared values: small pieces of state that live on the UI thread, mutate via worklets (functions compiled to run on that thread), and are read by the renderer without crossing back to JS. A halo whose brightness fades with time-since-arrival is a shared value the renderer multiplies into a colour every frame — no JS involvement once the value has been written.

The piece that took work was bridging the WebSocket-driven world (“a new message arrived”) back to the shared values without going through React. The pattern that worked: when a new node lands, the store mutates; the store notifies subscribers running outside React; those subscribers write directly into the corresponding shared values. React reconciliation never fires on the message hot path. The animation just gets new state to render.

A cache for the parts of the tree that do not change between frames.

A seven-thousand-node tree drawn as seven thousand separate primitive instructions costs about seven thousand schedule operations per frame, regardless of how each one is animated. Two strategies exist: instanced rendering (one draw call carrying a buffer of transforms — common in particle systems) and scene caching (record all the static primitives into one immutable display list, replay it as one draw call per frame).

The instanced path turned out to have two independent bugs in the binding library, one in each of two implementations of the same idea. Scene caching won by default. Freshly-arrived nodes and their per-frame effects sit on a small live layer above the cached one; only that layer’s small set re-records each frame. Drawing seven thousand nodes costs roughly the same as drawing fifty.

The anchor never moves.

When a deep reply lands somewhere off-screen, the tree’s geometry stays exactly as it was. The expansion is local; the rest of the world does not reflow. This sounds obvious until you have seen the alternative: a layout that recomputes the whole tree’s positions on every mutation, where the message you were just about to tap drifts five hundred pixels because something far away grew a sibling.

The choice was structural. Every node’s position is a deterministic function of its leaf-count and depth, never the positions of its peers. Expanding a branch subdivides that branch’s slice of the circle; everything outside it is invariant. The reading anchor stays where it is.

Two compounded bugs in the foundation.

The breath-and-rotation animation that gives the tree its ambient life looked fine for thirty seconds and then started skipping. Two unrelated bugs combined to produce one symptom.

The first was an Android lifecycle event — the one that says “app went into the background” — which does not fire when the screen locks. A known issue in the platform’s React Native bridge, with a small community library that patches it. Without that patch, an animation meant to pause on backgrounding instead keeps running with the screen off until the GPU context goes into a state it cannot easily recover from.

The second was a garbage-collection race inside Skia’s recorder, fixed two minor versions after the one in use. Animated transforms on a group node would occasionally race the recorder during cleanup. The symptom was a stutter before the renderer recovered.

Both bugs in isolation looked like tuning problems. Together they looked like the whole approach was wrong. The fix was upgrading Skia and adding the lifecycle patch — two small dependency edits that took the whole symptom away. The diagnostic cost was much higher than the patch cost; that is almost always how compounded foundation bugs read.

A density experiment that did not survive seven thousand nodes.

At low zoom on a very dense tree, the dots overlap. The obvious fix is to expand the world — spread the radius out so adjacent siblings cannot visually collide. Two variants of this both produced a tree so large that the default camera could not zoom out far enough to fit it. Clamped at the minimum, the entire tree drew in one frame, and the device thread sustaining the breath animation could not keep up. The app froze.

The right answer was the opposite. Do not make the world bigger; change what gets drawn when the camera is zoomed out. Below one threshold the tree renders as super-dots that aggregate adjacent same-author runs; above a higher threshold individual nodes become small bubbles with snippet text. Density becomes a rendering choice, not a layout choice. The world stays the size the screen can fit.