QUANTUM LITERARY BOOKSHELF
A React bookshelf application featuring an animated quantum particle system where words decompose, transform, and recombine — visualizing language as living consciousness
Color Theme Variant
Light-Color Theme Variant
About
Quantum Literary Bookshelf is a React app that animates words as particle systems. Letters break apart, disperse in circular patterns, drift, morph, and recombine into new words — with glowing connection threads between related entries.
Mathematical Foundation
Experimentation with the Golden ratio (φ = 1.618...) for spatial harmony and Pi for circular distributions to generate naturally beautiful positioning. Each word has its own "personality" — philosophical terms move slowly, Chinese characters pulse larger, mystical words leave ethereal trails.
Animation Phases
The quantum particle system features four distinct animation phases: Formation (0-30%) where letters spiral in, Stable (30-60%) with gentle quantum drift, Dispersion (60-75%) creating circular scatter patterns, and Chaos (75-100%) where letters morph into entirely new words.
Origin
Started as a General Assembly lab on Controlled Forms in React. Expanded into a particle animation system with SVG rendering, multilingual word sets, and golden-ratio spatial distribution — built collaboratively with Claude AI.
Tech Stack
My Role
Solo developer — animation system design, React architecture, mathematical algorithms for particle positioning, and UI/UX implementation.
Project Type
Personal Project / Creative Coding
Timeline
General Assembly Lab → Extended Creative Project
Key Features
Quantum Particle System
21 multilingual word sequences with letter-level particle physics in four animation phases — formation, stability, dispersion, and chaos.
Interactive Bookshelf
Progressive disclosure UI with collapsible sections, grid layout that expands from 150px to 250px cards, and glassmorphism styling.
Golden Ratio Positioning
Mathematical foundation using φ for spatial harmony and Pi for circular distributions — naturally beautiful particle placement.
Controlled Forms
React useState patterns with handleInputChange and handleSubmit for full CRUD operations on book collection.
Multilingual Poetry
English, Spanish, Chinese, and esoteric terms — each with unique visual behaviors based on linguistic character.
Accessibility First
prefers-reduced-motion support and performance optimization with useMemo and useCallback for smooth experience.