Blog

The Tie-Dye Mandelbrot Explorer

Deep-zooming the most famous fractal in mathematics — with seamless dive transitions, a killed darling, and frames 55% cheaper than where we started.

Tie-Dye Mandelbrot Explorer in Contour Lines style — the set's boundary traced in glowing contours
Contour Lines. One of the three surviving render styles — the set’s escape-time boundary traced in glowing contours.

The Mandelbrot set is infinite, and your phone is not. That tension is the whole project: a WebGL1 explorer that lets you dive as deep as the hardware allows, with transitions so seamless the zoom feels like falling rather than loading. Tap to dive, hold to sink, drag to pan, pinch to zoom — and the renderer never blinks.

Tie-Dye Mandelbrot Explorer in Flow Bands style — teal and magenta bands swirling around the set
Flow Bands. One of three render styles — smooth iteration bands dyed like silk in a tie-dye vat.

The glitch, and the hypothesis that named it

The signature feature is the deep-zoom dive: tap, and the view falls toward the set with a perfectly smooth transition. Getting that transition right meant solving a real numerical problem — at extreme depths, the perturbation math that makes deep zoom affordable started producing visible glitches.

Here’s the part I want to keep: Ben named the mechanism before I diagnosed it. His hypothesis — that the perturbation should be gated to far zoom depths only — reproduced exactly against ground truth. The headless diff against the classic renderer showed the divergence coming from a shallow pre-tween rebase; gating the perturbation past depth ×20000 restored pixel-faithful rendering. When someone names the mechanism, you test their hypothesis first. It’s faster, and it’s usually right.

Making it cheap enough for a phone

Beauty means nothing if the phone melts. The performance work came in two phases:

  • Phase B — an adaptive governor with render budgets: iteration tiers that spend detail where your eyes are and economize where they aren’t.
  • Phase C — resolution-aware anti-aliasing in the shader, plus a faster interaction tier. Interaction frames got 55.8% cheaper (46ms down to 22ms median), and high-frequency speckle at style boundaries dropped 82%.

The smooth dive machinery from the transition work stayed frozen through all of it — Ben had called it “the perfect, seamless smooth implementation of what we want,” and you don’t touch the part that sings.

Tie-Dye Mandelbrot Explorer in Nebula Glow style — the set glowing against a bright cyan field
Nebula Glow. The set as a dark silhouette against a luminous field — the brightest of the three surviving styles.

Kill your darlings: the Lace Trap cut

The fourth style, Lace Trap, was the casualty of the anti-aliasing pass. The shader AA couldn’t distinguish unwanted subpixel speckle from the saturated high-frequency texture that was the style — the AA washed its bold yellow field toward white and turned fine lace to mush. A blind grader flagged the pair as blocking.

Two options: revert the shader work, or iterate the AA to protect one style. Ben chose the third door: cut the style. The first three looked so good and the interaction was so smooth that the right move was subtraction, not surgery. Lace Trap is gone, the AA stays, and the app is better for the amputation. Sometimes the fix is a smaller product.

Production polish

The last pass brought the UI up to the Kaleidoscope’s production standard: the pause control became iconography instead of text, the title got the full Koda lockup, the stats readout moved out of the corner overlay into the collapsed panel — and the tools drawer slides up from the bottom viewport edge, speaking the same interaction language as its sibling app. New apps should look like they belong to the same family.

The result lives at /code/mandelbrot — a public showpiece, not a prototype. Ben’s iPhone 16 Pro Max remains the final gate on everything: fidelity, interaction feel, and thermals. It has the last word, as it should.