You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A pixel-art media-art focus ritual application with 3D WebGL stage, built with Vite + Three.js + GSAP.
Not a productivity dashboard. A digital ritual stage.
Tomato is a Focus Ritual Tool — not a standard Pomodoro timer.
Focus is not a task to manage but a ritual to enter. The visual language draws from pixel-art media installations, digital sculpture, and tactical signal aesthetics. Each session is a stage performance — beginning → signal lock → tension sequence → ceremonial completion.
Features
Feature
Description
5-View Navigation
HOME · PLAN · FOCUS · ARCHIVE · NEW via bottom tab bar
3D Background Stage
Three.js pixelated monolith + horizon grid + particle rain, reactive to app state
Split-Pane Planner
Monthly calendar (left) + planning console (right) with drag scheduling
Pomodoro Timer
Date.now()-precision countdown with focus/break cycles and long break every 4 blocks
AI Task Subdivision
Intelligent task decomposition into phased focus blocks
Archive Memory Vault
Completed rituals become collectible stamp cards with signal intensity metrics
Ritual Detail Sheet
Full session report with re-execute and planner cross-reference
i18n (EN / KO)
Full bilingual support with live toggle
PWA
Offline-capable via Service Worker with installable manifest
Browser Notifications
Focus/break completion alerts
Day Rollover
Auto-detects date change, marks incomplete tasks as missed
Design Language
Principle
Description
Night × Imperial
Deep black base (#000F08) with Imperial Red (#FB3640) as the singular reactive signal
Pixel-Art Media Art
Low-resolution digital sculpture stage, not retro game aesthetics
Behavioral UX
Every screen drives one action. Empty states invite, not just wait
Signal-Driven Motion
Animation is slow, geometric, state-controlled — never decorative
Color System
Token
Hex
Role
Deep Base
#000F08
Scene background, void
Stage Black
#050505
Monolith core, surfaces
Surface Black
#0F0F0F
Cards, panels
Hero Red
#FB3640
Signal event — active state, armed slot, tension
Break Green
#2ECC71
Rest cycle indicator
Soft White
#F4F1EA
Typography, wireframe glints
Typography
Font
Usage
Silkscreen
EN/NUM display — section headers, clock digits
Galmuri11/14
KO pixel font — Korean UI text
JetBrains Mono
Metadata, timestamps, monospaced copy
Architecture
Tomato/
├── index.html # App shell — 5-view SPA with all semantic sections
├── package.json # Vite 8 + Three.js 0.183 + GSAP 3.14
│
├── src/
│ ├── main.js # View router, render engine, all interactions (1,387 lines)
│ ├── state.js # Single source of truth, localStorage persistence (113 lines)
│ ├── timer.js # Date.now()-accurate countdown engine (90 lines)
│ ├── three-scene.js # 3D pixel media art background stage (253 lines)
│ ├── i18n.js # EN/KO dictionary (269 lines)
│ └── style.css # Full design system — CSS custom properties (1,644 lines)
│
├── public/
│ ├── manifest.json # PWA manifest
│ └── sw.js # Service Worker (network-first with cache fallback)
│
└── ref/ # Design reference files (not used in production)
├── app.jsx # Original React prototype reference
├── stage.js # 3D stage reference
├── styles.css # Style reference
└── Tomato.html # Original HTML reference
Module Dependency Graph
graph LR
A[index.html] --> B[main.js]
B --> C[state.js]
B --> D[timer.js]
B --> E[three-scene.js]
B --> F[i18n.js]
D --> C
E --> G[Three.js]
E --> H[GSAP]
Loading
5-View System
HOME — Action Stage
Hero card with tonight's main focus task, next-up preview, and pentagon SVG overlay
Signal bar showing pomodoro block progress (e.g. 2/4 BLOCKS)
Full-size pixel clock with state-based styling (echo/heavy)
Right column panels: Focus Slots // Today, Signal Stats (today/week/streak/total), Recent Rituals strip
CTA: [ BEGIN RITUAL ] + [ OPEN PLANNER ]
PLAN — Split-Pane Calendar Planner
Left pane: Monthly grid calendar with task indicators, today highlight, and date selection
Right pane: Planning console with selected date display, scheduled task list, unscheduled queue, task detail card, and AI plan output
Double-click any calendar cell to create a new task
AI plan apply/regenerate workflow
FOCUS — Ritual Timer
Fullscreen pixel clock with Silkscreen font
Rotating pentagon SVG overlay that accelerates as time decreases
Three intensity phases: normal → phase-warm (< 50%) → phase-tension (< 25%)
Progress timeline bar with 5-minute tick marks
Linked task display and status copy: SIGNAL LOCKED // IN PROGRESS
Controls: [ PAUSE ] / [ COMPLETE LOOP ]
BREAK — Rest Cycle
Green-tinted break timer (5 min standard / 15 min after every 4th block)
3D monolith freezes and wireframe turns green
[ SKIP REST ] option
ARCHIVE — Ritual Collection
Statistics header: total rituals, today count, streak, total focus minutes
[OPEN] → user clicks BEGIN → [ACTIVE] → timer runs → timer end / COMPLETE LOOP
→ task marked [DONE] → history entry created → pomodoroCount++ → BREAK mode
→ break timer → BREAK end → back to HOME → next ritual
Persistence (localStorage)
Key
Content
tomato_os_tasks
Task array
tomato_os_history
Completed ritual history
tomato_os_session
Session state (pomodoro count, calendar offset, selected date)
# Install dependencies
npm install
# Start dev server (http://localhost:5173)
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
Troubleshooting: If the UI appears broken, open DevTools → Application → Local Storage → delete all tomato_os_* keys, then refresh. This clears stale data from older versions.
Version History
Version
Highlights
V11
Bottom tab bar navigation, meta bar with sector label, per-view atmosphere system
V9
Split-pane planner, AI planning flow, archive memory vault
V8
Monthly grid calendar, Korean pixel font (NeoDunggeunmo → Galmuri)
