The latest articles on DEV Community by wenyumoney (@wenyumoney). https://dev.to/wenyumoney https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3994385%2F1833fc99-dd90-400b-8e4b-08c1c3635e84.png https://dev.to/wenyumoney en wenyumoney Sat, 20 Jun 2026 16:31:18 +0000 https://dev.to/wenyumoney/i-built-an-interactive-3d-universe-map-connecting-the-yin-yang-diagram-to-11-scientific-fields-23gi https://dev.to/wenyumoney/i-built-an-interactive-3d-universe-map-connecting-the-yin-yang-diagram-to-11-scientific-fields-23gi <p>I built an unusual educational website: a bilingual (EN/ZH) platform that maps the ancient Taiji (Yin-Yang) diagram onto 11 modern scientific domains — quantum physics, information theory, chaos theory, systems science, and more.</p> <p><strong>The core idea</strong>: the Yin-Yang diagram isn't mysticism — it's a remarkably prescient model of polarity, mutual dependence, and emergence. These same patterns appear across modern science in surprising ways.</p> <h2> What you can do on the site </h2> <ul> <li>🗺️ <strong>3D Universe Map</strong> — 21 nodes across 11 disciplines, connected by conceptual bridges. Drag to rotate, scroll to zoom, click golden nodes to enter deep-dive pages.</li> <li>🎥 <strong>Guided Tour</strong> — GSAP-powered camera fly-through covering 6 core nodes in narrative order.</li> <li>📖 <strong>11 Domain deep-dives</strong> — Each has its own page with custom Canvas/SVG/Three.js visualizations exploring the Taiji connection.</li> <li>📝 <strong>Knowledge Quiz</strong> — Per-domain quiz after each article + a cumulative 11-domain comprehensive quiz with score tracking.</li> <li>📍 <strong>Reading Progress</strong> — localStorage-based tracking across visits. Resume where you left off.</li> <li>🌐 <strong>Fully Bilingual</strong> — Defaults to English for international visitors.</li> </ul> <h2> Tech stack </h2> <p>Next.js 16 (App Router) + React 19 + TypeScript<br> Three.js / R3F / Drei + GSAP 3<br> Tailwind CSS v4 + next-intl v4</p> <h2> Some connections I found </h2> <ul> <li> <strong>Mathematics</strong>: Leibniz discovered binary arithmetic (0-63) through the 64 hexagrams in 1701 — the Bagua diagram is a 3-bit binary table</li> <li> <strong>Quantum Entanglement</strong>: Paired particles that mirror each other's states regardless of distance — pure yin within yang, yang within yin</li> <li> <strong>Symmetry Breaking</strong>: The universe's forces emerging from an undifferentiated state mirrors Yin-Yang differentiating from Wuji</li> <li> <strong>Information Theory</strong>: Shannon entropy formalizes order-from-chaos — pure yang emerging from yin</li> <li> <strong>Chaos &amp; Fractals</strong>: Hidden order in apparent randomness, infinite self-similarity — the Taiji within the Taiji</li> </ul> <h2> Why this was interesting to build </h2> <p>Making the 3D graph both beautiful and meaningful took many iterations of the force layout algorithm. Keeping the UI elegant in both Chinese and English (very different text lengths) forced a flexible card-based design. SSR/CSR consistency for the random quiz required implementing a seeded PRNG.</p> <p>🔗 <strong>Live site</strong>: <a href="https://tai-chi-diagram-science.vercel.app" rel="noopener noreferrer">https://tai-chi-diagram-science.vercel.app</a><br> 📂 <strong>Source</strong>: <a href="https://github.com/wenyumoney/tai-chi-diagram-science" rel="noopener noreferrer">https://github.com/wenyumoney/tai-chi-diagram-science</a></p> <p>Would love feedback on the 3D map UX and the bilingual design patterns!</p> learning science showdev webdev