Shevirah: sixteen inquiries into Kabbalah, drawn by hand

In Lurianic Kabbalah, creation begins with an accident. The vessels meant to hold the divine light could not hold it, and they broke. The light scattered as sparks, and the shards became shells around them. That event is shevirat ha-kelim, the breaking of the vessels, and it gives this series its name: Shevirah, the breaking.

It started as two separate art pieces, each with its own address: Klippot, four elements and their corruptions, and The Tree of Life, the sefirot drawn as a night sky. Both kept raising the same question: what does the tradition actually say? Shevirah is the answer we built. The two works now open a series of sixteen, and the other fourteen are the books themselves, from Sefer Yetzirah in late antiquity to Baal HaSulam in the 1940s. Each is read teaching by teaching, and each teaching has its own animated drawing.

Pieces in the series

16

Texts, in written order

14

Animated artworks

258

UI or CSS libraries

0

A static site, on purpose

Shevirah is a Next.js App Router site exported as plain static files. There is no server, database or account. The only dependencies are Next.js and React; the typefaces load through next/font, and everything else is hand-written CSS and inline SVG. The one thing it remembers is which teachings you have read, and that stays in your own browser.

The two works are one immersive page each. The fourteen texts share a kit: an index page that credits its sources, a page per teaching, and a sticky reading bar with “XI of XX”, a contents menu and arrow-key paging. A slim bar across the top names where you are in the series. It steps out of the way as you read down and comes back when you scroll up. The kit is why fourteen books by fourteen authors still read as one hand.

Every drawing has a second state

Each of the 258 teachings has its own artwork: inline SVG with its own CSS module, drawn in code rather than generated. They share a frame that owns a single interaction, looking closer. Hover, keyboard focus or a tap sets data-engaged on the frame, and the artwork shows a second state that finishes its idea. None of the 258 pieces wires up its own events, so the gesture behaves the same way everywhere.

The series has one visual vocabulary, so the drawings can teach across books. A soul is a point of light. A gilgul, a return, is a circular path. An ibbur, a soul that comes to dwell inside another for a time, is a violet guest light settling inside a gold one. In the Introduction to the Zohar, the will to receive is a hollow vessel and received light is gold.

Paraphrase, with the receipts

None of the teachings quotes a translation. Each is an original paraphrase of the text, read from Sefaria, and every page cites its exact place: gate and chapter, hakdamah, or numbered rule. Every text's index page names the edition it was read from and that edition's license. Usually that is a public-domain Hebrew printing, such as Warsaw 1884 for Sefer Yetzirah or Vilna 1874 for Nefesh HaChaim, with any English that was consulted credited by translator, year and license (CC-BY, CC-BY-NC or CC0).

Where a source was awkward, the page says so. Sefaria doesn't carry chapters 4–17 of Rav Kook's Orot HaTeshuvah, which are still under copyright. Those chapters were read from Wikisource, where the license is listed as unknown, and only paraphrased. Klalei Hatchalat HaChokhmah was written anonymously, and the page gives the attribution to R. Aryeh Leib Lifkin as Sefaria and Wikisource do, not as settled fact.

A reader should be able to check any teaching against its source in one step. That standard decided what made it into the series.

Every Hebrew term links to its page on Gamatria, our gematria search engine. The link strips the vowel points first, so a pointed word lands on its plain spelling, and a phrase opens a search instead of a word page.

The Tree, drawn the Ari's way

Most Tree of Life diagrams online follow Athanasius Kircher's 1652 tree, the one the Golden Dawn adopted. Shevirah's tree follows the Ari instead, as drawn in Aryeh Kaplan's Sefer Yetzirah. The three mother letters sit on the three horizontal paths, the seven doubles on the seven verticals, and the twelve simples on the diagonals. Two diagonals cross behind Da'at, and Malkhut connects only to Yesod. Each letter's correspondences (element, planet and day, sign and month, faculty, part of the body) follow the Gra recension of Sefer Yetzirah. Kircher's tree is one click away, for comparison.

• Descent draws the Flash of Lightning from the Crown down, and each sphere flares as the light reaches it. Ascent climbs the letters from ת back to א.
• Name: type a Hebrew word and its letters light their paths in order, with its gematria.
• Journey is a guided walk down the ten sefirot, in the order the light came.
• Arrow keys walk between the spheres, and Escape clears everything.

Klippot, made to be touched

Inside the series, Klippot answers touch as well as hover. Each element still turns into its corruption, and a press and hold turns it back for as long as you stay with it. Earth is the exception: it isn't restored, only held, and its cracks fill with gold. A short touch gets its own answer: fire throws sparks, water takes a drop, the stone rings, and air parts around your finger. A fifth shell, Nogah, is the one you act on. Gather its twelve sparks and the vessel closes around them.

Contrast is a number, not a feeling

A site this dark and this quiet is easy to make illegible, so the text colors were picked by measured contrast, with the ratios commented in the CSS beside them, and the text meets WCAG 2.2 AA. The quietest text tier is 4.75:1 on the background. On the Tree, labels sit over gradients, so each sphere's label carries a halo in that sphere's opposite tone and stays readable over every part of it.

• Reduced motion is honored everywhere. CSS animations are gated by the media query, and SVG SMIL timelines, which ignore CSS, are paused in script. Every piece falls back to a still frame that still makes sense.
• Each artwork is a labeled image whose description covers both of its states.
• No JavaScript hides nothing: reveal styles only apply under @media (scripting: enabled).
• Hebrew carries proper language and direction tags, set in Frank Ruhl Libre beside Cormorant Garamond.

What we'd tell a client

• When you have a lot of content, build the kit first. One shared frame and one reading bar made fourteen sections possible.
• Give one interaction one meaning. “Look closer” does the same thing on all 258 drawings, so nobody has to learn it twice.
• Credit sources where the reader is, not in a footer. Edition and license on the index page, the exact reference on every teaching.
• Static is a feature. No server means nothing to patch and nothing to go down.