Inspiration
Modern creators, developers, and students suffer from "checklist anxiety." Traditional task managers are dry, linear grids with aggressive red deadlines that spike cortisol and cause burnout. Time in these apps feels like an enemy counting down. We wanted to rethink time management from the ground up. Instead of a digital whip, we built a digital spa. What if time wasn't a grid, but a space you explore?
What it does
Chronos Canvas transforms your daily schedule into a generative 3D landscape. Here’s how it works:
Spatial 3D UI: Tasks are represented as glowing 3D mountains on a generative terrain. As the timer ticks down and the deadline approaches, the 3D mountain dynamically grows in height, visualizing the tension of time. Focus Audio Engine: When a user enters a "Flow State," the app utilizes the Web Audio API to generate a continuous 432Hz ambient drone. This physically cuts off external noise without requiring downloaded MP3 files. AI Smart Decomposition: Large tasks trigger procrastination. With one click, the "Smart Split" algorithm breaks down a massive task (e.g., "Prepare Pitch Deck") into three actionable sub-tasks (Research, Draft, Review). Gamified Analytics: Users earn "Focus Energy" points for every minute of deep work. The analytics dashboard tracks weekly focus sessions with dynamic, glassmorphic charts. Local-First Architecture: The entire app runs 100% client-side. Tasks, history, and focus points are saved in the browser's LocalStorage, meaning it works instantly without any backend latency or login requirements.
Challenges we ran into
Real-time Geometry Manipulation: Updating thousands of 3D vertices every frame without dropping the 60fps frame rate was difficult. We solved this by directly mutating the BufferGeometry attributes inside the useFrame loop, avoiding unnecessary React re-renders. Web Audio API Lifecycle: Managing the AudioContext state across browser tabs is notoriously tricky (browsers often suspend it). We had to ensure the oscillator started cleanly on a user gesture and ramped the gain node smoothly to avoid audio "clicks" when pausing or stopping the timer. Z-Index & Pointer Events: Layering a 2D glassmorphic UI over a full-screen WebGL canvas caused major click-blocking issues. We had to carefully manage pointer-events: none/auto across the DOM layers to ensure the 3D scene and the UI buttons were both interactive.
Accomplishments that we're proud of
We are incredibly proud of creating a product that is 100% functional (CRUD operations, timers, and persistent storage work flawlessly) while completely abandoning the traditional UI paradigm. The seamless transition where the 3D terrain changes color, the sphere grows, and the audio engine fades in—all triggered by a single "Enter Flow" click—is a massive UX win for us.
What we learned
We learned that abstract concepts like "time" and "focus" can be effectively communicated through spatial design. By linking the abstract 3D representation (the growing mountain) to concrete logic (the countdown timer), we managed to create an interface that lowers anxiety rather than increasing it.
What's next for Chronos Canvas — Spatial Time Planner
Real AI Integration: Upgrading the "Smart Split" feature to use OpenAI's API for intelligent, context-aware task decomposition. Biometric Sync: Integrating Apple HealthKit and wearable APIs to change the 3D landscape's weather based on real-time heart rate and stress levels. Spatial Soundscapes: Adding directional 3D audio that moves around the user's head as they interact with different parts of the 3D terrain.
Log in or sign up for Devpost to join the conversation.