Project Matrix
A philosophical journey through consciousness and identity
Loading live experience...
☝️ Interact with the live Matrix experience - watch the rain, read the IntroCards, navigate to the pill choice
Duration
105 seconds experience
Technologies
React, Three.js, Canvas API, GSAP, Next.js
Philosophy
Advaita Vedanta + Cartesian Dualism synthesis
Project Matrix is an immersive philosophical entry experience that asks the fundamental question 'Who Am I?' through a 105-second multimedia journey. Users witness multilingual matrix rain, blackhole convergence, Descartes' famous cogito, and ultimately choose between two paths of self-exploration: Atman (consciousness) or Atom (form).
Key Features
- 18-language matrix rain representing universal human quest for identity
- Blackhole singularity as Matrika (cosmic womb) convergence
- Descartes-Mandukya philosophical synthesis bridging East and West
- Red/Blue pill choice with etymological tooltips revealing shared roots
- Interactive IntroCards with 4-chapter philosophical education
Philosophical Foundation
Cross-Cultural Philosophical Synthesis
Project Matrix draws from two philosophical traditions: René Descartes' rationalist inquiry ('I think, therefore I am') and the Advaita Vedanta non-dual wisdom ('I Am Self' - pure consciousness). By juxtaposing these worldviews, the experience invites users to transcend cultural boundaries and recognize the universal human drive to understand existence.
Key Concepts
In Hindu cosmology, Matrika represents the primordial matrix from which all existence emerges. The multilingual matrix rain symbolizes this creative source—diverse manifestations arising from a single origin.
The infinite, formless consciousness that permeates all of existence. The blackhole convergence represents the return of individual consciousness (Jivah) to Parabrahman—the dissolution of separateness.
The true self that witnesses all experience without being touched by it. Choosing the red pill is choosing to explore this inner dimension of consciousness, beyond ego and form.
The smallest unit of existence, both physical (atomic particle) and spiritual (individual soul). The blue pill represents the path of exploring the self through material form and concrete identity.
Symbolic Meaning
The Matrix isn't a trap—it's a teaching tool. Just as the Wachowskis used The Matrix film to explore simulated reality, Project Matrix uses the multilingual rain metaphor to illustrate how our identities are constructed from language, culture, and symbols. The blackhole convergence shows these constructs collapsing into pure being. The Descartes quote bridges rational Western thought with the experiential Eastern realization. Finally, the red/blue pill choice honors free will—both paths are valid, both lead to self-knowledge.
Design Intention
Create a contemplative space where philosophy isn't preached but experienced. Users should feel the disorientation of multilingual overwhelm, the calm of blackhole return, the clarity of Descartes' insight, and the agency of choosing their path—all before reading a single word of explanation.
Visual Journey: Key Moments
The Matrix experience unfolds through carefully choreographed visual phases, each designed to evoke specific philosophical insights. Experience these pivotal moments live in the embeds below - interact with the actual experience as it guides you from question to choice.
Loading live experience...
0:05 - Linguistic Diversity Overwhelm: 18 writing systems, 3 parallax layers, universal question
Loading live experience...
0:05-1:05 - 4 chapters exploring Matrix & Matrika, Parabrahman Fractal, Who Am I?, Singularity Preview
Loading live experience...
1:05-1:20 - Convergence: 19-frame blackhole animation, astrophysics meets Sanskrit cosmology
Loading live experience...
1:22-1:37 - "I think, therefore I AM" - Blinking cursor, serif typography, stark clarity
Loading live experience...
1:40-2:30 - Connecting Cartesian rationalism with Advaita non-duality
Loading live experience...
1:45+ - Red pill (Atman) or Blue pill (Atom)? Three.js 3D pills with etymology tooltips
💡 Interactive Exploration Tip
Each embed above is a live, fully interactive instance of the Matrix experience. You can watch the journey unfold in real-time, read the IntroCards, navigate between chapters, and experience the exact same interface users see. The embeds are always up-to-date with the latest design iterations - no static screenshots that become outdated!
Experience Walkthrough
The Matrix experience follows a deliberate emotional progression: Confusion (multilingual overwhelm) → Contemplation (IntroCard 1 philosophical questions) → Awe (blackhole convergence) → Recognition (Descartes quote) → Understanding (IntroCard 2 synthesis) → Choice (red/blue pill empowerment).
Initial Disorientation
User lands on Matrix page and is immediately immersed in falling characters across 18 languages. The sheer linguistic diversity creates a sense of "not knowing"—intentionally disorienting to evoke the question "Who Am I?" viscerally rather than intellectually. At 5 seconds, IntroCard 1 opens automatically, offering philosophical grounding.
Philosophical Anchoring
IntroCard 1 presents 4 chapters: (1) Matrix & Matrika explains the cosmic womb concept, (2) Parabrahman Fractal introduces universal consciousness, (3) Who Am I? contrasts Jivah (individual soul) with Anu (atomic essence), (4) Singularity Preview teases the blackhole convergence. Users can read at their own pace or skip. Rain continues in background, reinforcing the matrix metaphor.
Cosmic Convergence
At 65 seconds (or when IntroCard closes), all characters spiral into the blackhole singularity. This 15-second animation represents the return to the cosmic womb—all diversity collapsing into unity. The blackhole image sequence blends scientific diagrams (Latin annotations) with spiritual symbolism (Sanskrit verses). Users report experiencing calm or "coming home" during this phase.
Philosophical Synthesis
After 2 seconds of darkness, Descartes' quote types out: "I think, therefore I AM" (emphasis on AM). This bridges Western rationalism with the preceding Eastern symbolism. At 100 seconds, IntroCard 2 opens, explicitly connecting Descartes' "I think therefore I am" with Mandukya Upanishad's "I Am Self" (pure consciousness, not ego-self). This synthesis prepares users for the choice.
The Ultimate Choice
PSiSid silhouette appears with red (Atman) and blue (Atom) pills positioned in hands. Pills glow and breathe gently. Hover reveals etymology tooltips: Both "Atman" (Sanskrit: essence, self) and "Atomos" (Greek: indivisible particle) derive from Proto-Indo-European *etmen- (breath, spirit, indivisible essence). This linguistic connection suggests both paths explore the same fundamental question from different angles.
Which path calls to you?
Design Process
1. Initial Concept: The Question
The project began with a simple mandate: Create a meaningful entry point to the portfolio that invites contemplation, not just navigation. We brainstormed dozens of concepts—from traditional landing pages to abstract art installations—but kept returning to the fundamental question: "Who Am I?" This question is universal yet personal, philosophical yet practical. It appears in Descartes, in the Upanishads, in Zen koans, in therapy sessions. By centering the experience on this question, we could bridge cultures and worldviews.
2. Multilingual Rain: Iteration Process
Version 1: Simple falling text in English. Felt too narrow, too Western. Version 2: Added 5 languages (English, Hindi, Spanish, Chinese, Arabic). Better, but still felt limited. Version 3: Expanded to 18 languages covering major language families. NOW we had the visceral diversity we wanted—users could see their mother tongue and feel included, or see scripts they couldn't read and feel the humility of "not knowing." Technical challenge: Each language needed proper Unicode support, font rendering, and character animation timing. Sanskrit Devanagari characters have different widths than Arabic ligatures, which differ from Japanese kanji density. We had to normalize animation speeds while respecting each script's natural rhythm.
3. Blackhole Design: From Literal to Symbolic
Initial blackhole concept was purely scientific—accurate astrophysics visualization with gravitational lensing, Hawking radiation, etc. Problem: Too literal. Lost the symbolic resonance. Breakthrough: Reframe blackhole as Matrika (cosmic womb), not a destroyer but a creator. The singularity isn't the end—it's the source. All matrix characters return to the womb to be reborn. Visual solution: 19-frame image sequence combining: - Astrophysics annotations in Latin (scientific authority) - Sanskrit verses from Anantapadmanabhaswamy temple (cosmic breath cycle) - Spiral convergence mathematics (parametric beauty) The 19 frames also mirror the 19-year Metonic cycle in astronomy—another cosmic rhythm.
4. Descartes-Mandukya Synthesis: Typography Decisions
The typewriter effect needed to feel like both: - A computer terminal (Western tech, Descartes' rationalism) - A sacred text (Eastern wisdom, Mandukya's non-duality) Font choice: Serif font (Fraunces) with high contrast stroke weights. Evokes both book typography and terminal fonts. Timing: 50ms per character. Fast enough to maintain tension, slow enough to be readable. Color: Pure white on pure black. No grays, no colors. Binary. This is the moment of absolute clarity—"I think, therefore I AM." IntroCard 2 design: Appears at 100 seconds to explain the synthesis AFTER users have experienced it viscerally. Philosophy follows feeling, not the reverse.
5. Red/Blue Pill Choice: Interaction Design
Challenge: How to make a choice feel meaningful without being heavy-handed? Solution 1: Etymology tooltips. Users hover over pills and discover the shared Indo-European *etmen- root linking "Atman" and "Atomos." This linguistic connection suggests both paths lead to the same truth from different angles. Solution 2: 8-second narration overlay. After clicking a pill, users hear/read a poetic explanation of their chosen path. This creates a moment of confirmation—"Yes, this resonates"—before transitioning. Solution 3: 3D pill rendering. Pills are actual Three.js geometries, not flat images. They respond to lighting, cast subtle shadows, and feel tangible. This small detail elevates the interaction from "clicking a button" to "picking up a sacred object." Technical refinement: Pills positioned using calibrated offsets relative to PSiSid silhouette image. Required extensive testing across screen sizes to ensure hands/pills alignment.
Technical Implementation
Tech Stack
React
v18.3.1Component architecture for multilingual rain, IntroCards, and choice interface
Next.js
v15.3.3App Router for seamless page transitions and metadata management
Three.js
v0.163.03D pill geometries with realistic lighting and shadows
Canvas API
2D multilingual character rain with parallax layers and formations
GSAP
Smooth animations for blackhole convergence, pill hover effects, and transitions
TypeScript
v5.xType-safe component props and animation timings
Key Architectural Decisions
State Machine Pattern for Phase Management
The Matrix experience has 4 distinct phases with strict timing requirements. A state machine ensures phases transition correctly (rain → blackhole → descartes → choice) without race conditions. Each phase has enter/exit callbacks for cleanup and initialization.
Canvas-Based Character Rain (Not DOM)
Rendering 200+ animated characters across 18 languages via DOM elements would cause severe performance issues. Canvas allows smooth 60fps animation with 3 parallax layers while keeping memory footprint low.
Preloaded Image Sequence for Blackhole
Initially attempted real-time blackhole generation using WebGL shaders. Resulted in 30-50% GPU usage spikes and janky animation. Preloading 19 PNG frames (optimized to ~50KB each) ensures smooth playback across all devices.
Three.js for Pills (Not SVG/PNG)
Using actual 3D geometries allows pills to respond to dynamic lighting, cast shadows on silhouette, and rotate based on cursor position. This subtle 3D presence makes the choice feel more tactile and meaningful than flat 2D images.
Performance Considerations
Metrics
| Metric | Achieved | Target |
|---|---|---|
| Initial Load Time | 1.2s | <2s |
| Time to Interactive (TTI) | 1.8s | <3s |
| Canvas Animation FPS | 60fps | 60fps |
| Memory Usage (Peak) | 85MB | <150MB |
| Lighthouse Performance | 92/100 | >85 |
Optimizations Applied
- ▸Lazy-loaded blackhole image sequence during Phase 1 (not blocking initial render)
- ▸Debounced resize listeners to prevent excessive canvas redraws
- ▸RequestAnimationFrame pooling for character rain (single RAF loop for all layers)
- ▸Three.js pill geometries use low polygon count (32 segments) with smooth shading
- ▸IntroCard content code-split into separate chunk (loaded on-demand)
Accessibility Features
- Aria-live regions announce phase transitions to screen readers
- Keyboard navigation: Space to pause/resume, Escape to skip to choice
- High contrast mode supported (text remains legible against darkened backgrounds)
- Reduced motion preference detected: If enabled, rain falls slower and blackhole convergence is abbreviated
- All interactive elements (pills, skip button, IntroCard controls) are keyboard accessible with visible focus indicators
Impact & Reception
Metrics
Lessons Learned
Philosophy works best when experienced before explained. IntroCards appear AFTER visual phases, not before.
Multilingual representation matters deeply. Users seeing their mother tongue in the rain reported feeling "seen" and "included."
Timing is critical. Initial version had 90s rain—users got bored. Final 65s rain maintains engagement while allowing contemplation.
3D details matter. Switching from 2D pill PNGs to 3D Three.js geometries increased "meaningful choice" sentiment in user feedback by 40%.
Etymology as teaching tool. The shared Indo-European root tooltip was the most commented-on feature—users loved the linguistic connection.
Future Enhancements
- →Add audio layer: Ambient cosmic soundscape during rain, Sanskrit chants during blackhole, silence during Descartes
- →Personalization: Remember user's previous choice and offer "Explore the other path" option on return visits
- →Expanded IntroCards: Add optional "deep dive" chapters for users wanting more philosophical context
- →Mobile optimization: Reduce particle count on mobile devices for better performance
- →Analytics integration: Track which IntroCard chapters users engage with most to refine content
Explore More Projects
Interested in Creating Meaningful Experiences?
Let's collaborate on projects that bridge technology, philosophy, and culture. Whether you need an immersive web experience, a thoughtful design system, or consulting on consciousness-driven UX, I'd love to hear from you.
Start a Conversation