The Tree of Life: 1,137 lines, three dependencies

The Tree of Life is Kabbalah's central diagram: ten sefirot in three pillars, joined by twenty-two paths, with the divine light descending from crown to kingdom in a zigzag called the Flash of Lightning. This piece renders it as an interactive night sky — hover a sphere and its paths light up; click and a panel opens with its Hebrew name, divine name, archangel, and a one-sentence meditation; press the ⚡ button and the lightning descends again.

It's among the smallest of the studio's self-initiated pieces — a study in how much atmosphere fits in about eleven hundred lines of plain JavaScript, SVG, and CSS, with nothing installed beyond Next.js and React.

Lines total

1,137

Dependencies

3

SVG elements

~320

Stars

170

A diagram as data

Everything the tradition specifies lives in one data file: ten sefirot with seventeen fields each (eighteen for Malkhut, which carries its four quartering colors) — Queen Scale colors, divine names, archangels, heavens, meditations — plus Da'at the hidden non-sefirah, and twenty-two paths carrying their Golden Dawn letter attributions. The rendering layer just draws whatever the data says. The info panel is themed by data too: one --accent variable set to the selected sphere's color drives its border, glow, and headings through color-mix(), so Gevurah's panel glows red and Chesed's blue with no per-sphere CSS.

The geometry is computed, not traced: a small polar helper sweeps the three veils of Ein Sof above the crown, Malkhut's traditional four-color quartering is built from calculated pie wedges, and the letter medallions sit at interpolated midpoints along their paths — with per-path overrides where two midpoints would collide.

Animation, chosen per job

There is no animation library and no JavaScript animation loop — just six animations across seven CSS keyframe blocks and, for the twenty-two sparks of light that drift along the paths, SVG's own animateMotion. The lightning bolt draws itself with the classic stroke-dasharray technique, normalized via pathLength="100" so the keyframes never need to know the real path length; replaying it is one line — a React key increment that remounts the bolt and restarts the CSS.

Da'at, the hidden non-sefirah, breathes on an eleven-second cycle while every other sphere breathes at seven — the animation timing encodes its theological status.

The invisible engineering

• ▸Hydration-safe randomness: the 170-star field is generated by a seeded deterministic PRNG, so server and client render identical stars — no hydration mismatch, no client-only flicker. The seed, fittingly, is 5786: the Hebrew calendar year.
• ▸Zero-re-render parallax: mouse movement writes two CSS custom properties directly; the two star layers translate via calc() at different gains and lags. React state is never touched on mouse move.
• ▸A documented SVG gotcha: lit paths glow via CSS drop-shadow() instead of an SVG filter, because a filter on a perfectly vertical line collapses with its zero-width bounding box — the kind of thing you only learn by hitting it.

Honest edges

We fact-check our own case studies against our own code, so in fairness: this piece has known gaps. Reduced-motion support is partial — the main animations stop (stars, halos, veils, lightning), but the SMIL sparks, the panel entrance, and the mouse parallax don't. Keyboard users can reach and open every sphere, but focus doesn't light up the connected paths the way hover does, and the info panel lacks full dialog semantics. On a client engagement those would be tickets; on an art piece this size they're the documented next round.

What we'd tell a client

• ▸Determinism beats suppression: a seeded PRNG solves server/client rendering mismatches at the root, instead of hiding them with client-only rendering.
• ▸Keep high-frequency input out of React state — CSS custom properties make sixty-times-a-second updates free.
• ▸Model the domain as data and let rendering follow; the whole visual identity of the piece lives in one file anyone could edit.
• ▸Ship small things honestly: a public list of known edges builds more trust than silence.