unfold

unfold is a React component for rendering branching timelines as a 3D graph: flat-shaded nodes connected by curved edges with per-edge particle streams flowing between them. The visual language is borrowed from the Prime Radiant in Apple TV's Foundation - wine background, sage and copper accents, woven-palette particle wisps drifting along edges, sparse bright glints driving bloom pinpricks against a dim matte grain. The intended use is exploring large state-and-action trees, decision graphs, or any data where the structure of branching matters as much as the contents.

The codebase is split into a public library surface (<Unfold data={...} theme={...} style={...} layout="layered"/>) and a demo app that consumes it. The library boundary is deliberately three-free - positions are plain number tuples and colors are hex strings, so consumers never see a THREE.Vector3. Built on react-three-fiber, drei, postprocessing for bloom, and leva for live controls (now a public theming surface, not just a dev HUD); particles use custom GLSL with an EdgeFlow path that blends up to eight colors-in-proportions per edge. Layout is deterministic across reloads via a seeded PRNG.