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
This project creates a "living library of consciousness" where words exist as quantum particles in a literary universe. Letters break apart at the atomic level, disperse in circular patterns, drift through chaos where they morph and recombine, then coalesce into entirely new words — all connected by glowing threads representing quantum entanglement.
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.
From Lab to Cosmos
Started as a General Assembly lab on Controlled Forms in React. Evolved into an exploration of quantum physics visualization, advanced React patterns, SVG animation, and multilingual poetry — developed collaboratively with Claude AI as a learning tool and creative partner.
From a simple form lab to a quantum literary cosmos — built with React, assisted and refined with Claude AI and an exploratory creative, digital interpretation on how language lives and breathes, somewhere in the ether.
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.