Family Tree Visualizations
15 approaches to the same family data — from pure CSS to WebGPU, D3 physics to GSAP cinema, Mermaid auto-generation to Anime.js morphing. Same source, different perspectives.
Batch 1 — Foundations
Glassmorphic Tree
Frosted glass cards with SVG connections, animated gradient borders. Zero dependencies beyond Tailwind.
Interactive Flow
Draggable node graph with React Flow. Zoom, pan, minimap. Custom glassmorphic nodes with animated edges.
Radial Orbit
Frank at center with family radiating outward in concentric rings. Pure SVG with smooth hover animations.
Timeline
Generational timeline flowing top to bottom. Each generation is a chapter. Storytelling meets data viz.
3D Constellation
Family as glowing stars in 3D space. Orbiting camera, connection beams, interactive hover labels.
Batch 2 — Advanced Techniques
Force-Directed Graph
D3 physics simulation — nodes attract and repel based on relationship closeness. Drag to rearrange.
Pedigree Chart
Classic ancestry format — Frank at bottom, branching upward through parents to grandparents.
Scroll-Driven
Pure CSS scroll-driven animations. Zero JavaScript animation code. GPU-composited, main-thread-free.
Cinematic Scroll
GSAP ScrollTrigger for film-quality scroll experience — parallax layers, pinned sections, morphing.
GPU-Enhanced 3D
Upgraded Three.js with orbital rings, enhanced particles, and WebGPU-ready architecture.
Batch 3 — Experimental
Sunburst
Nivo concentric rings — Frank at center, parents first ring, grandparents outer ring. Declarative React.
Canvas 2D
Hand-painted HTML Canvas with bezier curves, hover effects, retina support. Export as PNG.
Mermaid
Auto-generated from family data — Mermaid syntax drives the visualization. Toggle layouts.
Web Animations API
Zero-dependency native browser animations. Uses element.animate() with spring-like CSS linear() easing.
Morphing Layouts
Three layout modes (tree, radial, grid) with smooth SVG morphing transitions between them.
All 15 variants read from the same data source: lib/family-tree-data.ts which mirrors .frankx/family/*.md