Cognitive Drift: Exploring the Digital Mindscape

Cognitive Drift is an interactive web application that merges traditional UI design with immersive 3D physics and neural visualizations.

About the Project

What inspired me

The project was inspired by the intersection of human cognition and spatial awareness. I wanted to build an interactive digital "lab" where users could navigate through abstract mental concepts. This led to the creation of neural-themed elements like the BrainEntity and interactive navigational displays like the NavHUD.

How I built it

The foundation of the project relies on Vite and TypeScript (vite.config.ts, tsconfig.json), using Bun for rapid package management (bun.lock, bunfig.toml). I structured the user interface using a robust, highly modular UI component library encompassing elements from accordion and carousel to sidebar and dialog menus (src/components/ui/).

The core visual experience is split into distinct interactive "scenes" within the lab, including the KineticWallScene, FlythroughScene, FaceScene, and DoorwayScene. Application routing is handled dynamically (src/router.tsx, routeTree.gen.ts).

Challenges I faced

A major technical hurdle was managing the real-time calculations within the PhysicsScene. To create smooth, believable motion for the interactive elements, I had to optimize standard kinetic energy calculations, typically represented as:

$$E_k = \frac{1}{2}mv^2$$

I had to ensure the browser maintained a high frame rate while updating rigid body states. Furthermore, ensuring that rendering failures didn't crash the entire application required writing custom error boundaries and capture mechanisms (error-capture.ts, lovable-error-reporting.ts).

What I learned

Building this taught me how to effectively bridge standard DOM UI interfaces (like a navigation-menu or scroll-area) with complex 3D canvas environments. I also deepened my understanding of dynamic routing and robust error handling in modern React applications.

Built With

• 3d
• bun
• css
• react
• tailwind
• typescript
• vite