Fractal

A pure WebGL, keyboard-driven Deep Work OS that uses AI to recursively decompose complex tasks.

Comment

Inspiration: The Noise of the Modern Workspace

Modern productivity tools are loud. They are cluttered with notifications, nested menus, and endless checkboxes that induce anxiety rather than focus. I realized that as builders, our best work happens in the quiet moments—when we are deep in a terminal or a beautifully configured, distraction-free environment, operating purely on flow.

I wanted to build Fractal: a Deep Work Operating System that doesn't just track tasks, but actively pulls you into a state of deep focus. I wanted an environment that breathes with you, where the friction between a massive, overwhelming goal and the first line of code is instantly dissolved by AI.

What it does

Fractal is a keyboard-driven, visually immersive workspace designed to keep you in the zone.

Neural Task Decomposition: Stuck on a massive goal? Type a prompt like Build a secure authentication flow, press Cmd+K, and our AI instantly fractures the giant milestone into a highly specific, hierarchical tree of actionable steps.

Time-Boxed Architecture: Tasks aren't just "done" or "not done." By typing @45 next to a task, Fractal assigns a dedicated time pool, dynamically rolling up estimated vs. actual time spent across parent and child nodes.

Fluid WebGL Immersion: The background isn't a static image. It is a live, GPU-accelerated fluid simulation. As you move your mouse, crisp, high-velocity water ripples refract the light and image behind it, creating a tactile, physical connection to your workspace.

Zero-Friction UX: Mouse-free navigation. Arrow keys to traverse the tree, N to spawn tasks, and F to lock into a focused timer.

How we built it

Instead of reaching for heavy, bloated frontend frameworks, I wanted to understand the mechanics from first principles. Fractal is built entirely with Vanilla JavaScript, HTML5, and CSS, running a custom state engine. The Architecture: I engineered a decoupled, flat-array state manager. Instead of brittle, deeply nested JSON objects, tasks are stored flat with relational parentId pointers, allowing for $O(1)$ updates and bulletproof localStorage serialization. The Physics Engine: The fluid background does not use generic DOM animation libraries. I wrote custom GLSL shaders from scratch. And utilized ping-pong framebuffers and solving the wave equation (next = 2·curr - prev + c²·∇²curr) directly on the GPU.

A glimpse into the physics core: Decoupled mouse lerping for fluid dynamics mouseLerp.x += (mouseRaw.x - mouseLerp.x) * 0.055; mouseLerp.y += (mouseRaw.y - mouseLerp.y) * 0.055;

Challenges we ran into

The hardest part was perfecting the "physics" of the interface. Initially, tying the water ripples directly to DOM mousemove events created a jagged, stuttering wake. I had to completely decouple the input state from the rendering loop, implementing linear interpolation (lerping) inside a requestAnimationFrame loop so the water smoothly chases the cursor. Tuning the wave velocity and friction floats in the GLSL to make it feel like deep, fast-moving water rather than thick syrup took dozens of iterations.

Accomplishments that we're proud of

I built a production-ready, highly polished application in less than 2 days. But more importantly, I built a tool that people actually want to use. Achieving a "liquid glass" aesthetic and a seamless, keyboard-first workflow without importing a single external UI component is a massive win for performance and design.

What we learned

I learned that absolute control over the lowest levels of the stack—whether that's manipulating the DOM directly or pushing raw pixels through WebGL fragment shaders—yields the best user experience. When you strip away the abstractions, you can build software that feels like an extension of your own thoughts.

What's next for Fractal

This is just the foundation. Next, I plan to implement local-first encrypted syncing so your workspace travels with you, advanced D3.js analytics dashboards to visualize your flow state streaks, and deeper API integrations to push completed markdown trees directly into GitHub repositories. Right now Fractal is built entirely as a Client-Side (Frontend) application hosted on GitHub Pages, integrating a real AI API directly into file is highly dangerous. To integrate a real AI free tier, I have to build a "Middleman." Instead of my frontend talking to the AI, frontend talks to my secure middleman, and middleman talks to the AI. This is just a demo of how it is intended to work in future. Giving users more ease of use and freedom to make, edit and control your tasks.

Share this project:

Updates