Realm

Turn daily focus sessions into an immersive character-building adventure, where every completed timer unlocks growth, rewards, and new stories.

Comment

Realm: Turn Focus Into an Adventure

Inspiration

Most focus apps help people count minutes, block distractions, or maintain streaks. They are useful, but after the novelty wears off, completing another timer often feels like updating a number rather than accomplishing something meaningful.

Games solve a different problem exceptionally well: they make progress visible, emotional, and worth returning to.

We were inspired by the daily engagement of games such as Pikmin Bloom and the visual accumulation of Forest, but wanted to explore a different question:

What if every period of real concentration became part of an ongoing character adventure?

That idea became Realm, a portrait-format focus game where completing real-world tasks advances a cinematic world. Players do not simply earn points. They develop a character, restore a fallen school, discover martial manuscripts, unlock abilities, encounter story events, and gradually approach a higher “realm” of mastery.

The current chapter follows the last disciple of Tenkyo Hall, home of the Still Water Sword Style. After the school is destroyed, the player helps its survivor rebuild both his discipline and his world, one completed focus session at a time.

Realm is designed as the foundation of a larger character-driven universe. The swordsman is the first playable path, while future characters can introduce entirely different settings, personalities, progression systems, and stories.

What It Does

Realm transforms a familiar focus timer into a complete game loop:

  1. Choose a focus intention: Mission, Study, Meditation, Reading, or Custom.
  2. Select a session length and begin training.
  3. Stay focused while the character enters a matching cinematic scene.
  4. Complete the session to open the Gate of Realm.
  5. Reveal a rarity-based result containing experience, currency, manuscript fragments, equipment, titles, or story progress.
  6. Use earned progress to develop the character, illuminate inner pathways, learn techniques, restore Tenkyo Hall, and unlock new events.

Each focus category has a different visual identity. A Mission session may place the character in an intense battle, while Study, Reading, and Meditation lead to quieter training environments.

The reward system also responds to different focus habits. Some equipment benefits short repeated sessions, while other abilities reward longer periods of deep concentration. Consecutive sessions can build a limited training multiplier, and rare rewards can improve future discovery chances.

More Than Experience Points

We wanted progression to offer more than a single EXP bar.

Realm currently includes several connected progression systems:

  • Character evolution: New visual stages and specialization paths appear as the player advances.
  • Inner Realm training: Focus sessions illuminate acupoints and meridian paths.
  • Single-technique cultivation: The player selects one martial art to study at a time. It can only be mastered after collecting the required manuscript fragments and illuminating enough inner pathways.
  • Manuscript discoveries: Completed sessions may reveal fragments used to study new techniques.
  • Tenkyo Hall restoration: Players earn Tenkyo Coins and use them to rebuild locations around the ruined school.
  • Cinematic events: Map events can require particular techniques before they can be completed.
  • Chronicle and collection: Completed events, rewards, equipment, titles, and results remain available for review.
  • Focus history: The Warrior Record visualizes how the player divides time across five training disciplines.
  • Daily and consecutive progress: Daily objectives, streaks, and training chains encourage consistent return without requiring endless interaction.
  • Cloud saves: Anonymous play can later be connected to Email or Google and restored on another device.
  • Optional leaderboard foundation: Focus-session records are stored separately and can support privacy-aware rankings for players who choose to participate.

The Experience

Realm is intentionally designed as a vertical, mobile-first web experience.

Instead of placing large productivity controls over decorative artwork, we treated every state as part of the world:

  • Time is selected through restrained gesture-driven controls.
  • Starting a session feels like entering training.
  • Focus scenes use subtle breathing, light, ripple, and environmental motion.
  • Completion begins with a sealed gate that the player physically pulls open.
  • Results unfold in stages so rewards feel discovered rather than dumped onto the screen.
  • Evolution and story events use cinematic transitions, dialogue, music, and haptic feedback where supported.
  • A progressive onboarding system introduces advanced features one at a time.

The result is not a productivity dashboard with game elements added on top. It is a character adventure powered by real concentration.

How We Built It

Realm is built as a responsive Progressive Web App using React, TypeScript, and Vite.

The game logic is separated from presentation so that focus timing, reward rolls, progression, streaks, currencies, manuscript inventory, event requirements, and save migration can be tested independently.

We used Supabase for:

  • Anonymous authentication
  • Email and Google account linking
  • Cross-device cloud saves
  • PostgreSQL data storage
  • Row Level Security
  • Deduplicated focus-session records
  • Privacy-aware leaderboard infrastructure

The application also uses browser capabilities including:

  • Progressive Web App installation
  • Web Audio for music and interaction cues
  • Page Visibility handling
  • Native Web Share where available
  • Local storage as an offline-compatible fallback
  • Haptic feedback on supported devices

OpenAI Codex was used throughout development as an engineering collaborator for architecture, implementation, debugging, test coverage, responsive UI refinement, and packaging. OpenAI-assisted image-generation workflows were also used to explore and produce the cinematic environments, character states, reward scenes, and event artwork that define Realm’s visual experience.

The app currently supports Traditional Chinese, English, and Japanese interface foundations.

Challenges We Faced

Making Gamification Motivating Without Becoming Distracting

The largest design challenge was balancing entertainment with concentration. A focus game fails if players spend more time managing the game than doing the work.

We simplified the main loop to one intention, one duration, and one start action. Deeper systems remain available after the session and unlock gradually, so new players are not overwhelmed.

Making Every Completion Feel Valuable

Early versions displayed all reward information at once. Players received EXP, currency, fragments, progression, and event prompts in a single dense result screen.

We redesigned completion as a sequence:

  1. The focus session ends.
  2. A sealed gate appears.
  3. The player opens it.
  4. A cinematic character reveal plays.
  5. Results appear progressively.
  6. Story or feature invitations follow only when relevant.

This reduced cognitive overload and made each reward easier to understand.

Building a Game Inside a Mobile Web Page

Mobile browsers introduce limitations that native applications do not have. Audio playback requires user interaction, background behavior varies by browser, PWA installation differs between Android and iOS, and web vibration is not universally supported.

We built graceful fallbacks so the core timer, progression, and cloud-save experience remain functional even when a specific browser capability is unavailable.

Maintaining Visual Consistency

Realm depends heavily on cinematic artwork. Keeping the same character identity, costume, atmosphere, vertical composition, and correct sword-hand anatomy across many generated scenes required strict visual references, repeated review, asset replacement, and compression.

We also had to preserve enough negative space for UI without hiding the artwork that makes the project distinctive.

Reliable Progress and Account Migration

Players may begin anonymously, continue locally, and later connect an Email or Google account. That creates difficult questions about which save should win and how duplicate sessions should be prevented.

We introduced profile schema versions, safe migrations, revision tracking, session identifiers, and database-level access policies. The local game also continues working when Supabase is unavailable.

What We Learned

We learned that a focus product becomes more compelling when progress is represented in several different ways:

  • Immediate progress through a reward reveal
  • Medium-term progress through techniques, events, and evolution
  • Long-term progress through restoration, collections, character paths, and historical records

We also learned that visual feedback alone is not enough. Players need to understand why a reward matters, where it can be used, and what it moves them toward.

Finally, we learned that advanced systems are easier to enjoy when they are introduced through play. Realm now unlocks major features progressively after completed sessions rather than presenting every system during onboarding.

Accomplishments We Are Proud Of

  • Built a working mobile-first focus game rather than a static concept
  • Connected real focus behavior to character and story progression
  • Created a cinematic, staged reward experience
  • Implemented manuscript collection and single-technique cultivation
  • Built interactive map events with ability requirements
  • Added restoration currency and long-term world progression
  • Added anonymous, Email, and Google cloud-save flows
  • Created a PWA that can be installed from a browser
  • Built multilingual foundations for Chinese, English, and Japanese
  • Maintained automated coverage across progression, storage, audio, authentication, and screen flows

What’s Next

The next phase of Realm will expand beyond its first swordsman storyline.

Planned developments include:

  • Additional playable characters with distinct worlds and progression systems
  • More evolution branches and branch-exclusive stories
  • Expanded martial arts, equipment, manuscripts, and map events
  • A fully visualized restoration of Tenkyo Hall
  • Seasonal focus journeys and community challenges
  • Opt-in leaderboards based on focus time, realm level, and completed trials
  • More detailed long-term focus visualizations
  • Additional accessibility and reduced-motion options
  • Deeper OpenAI-powered narrative personalization and adaptive character dialogue

Our long-term goal is to make Realm a place people return to every day, not because they are forced to be productive, but because every focused moment moves a world and its characters forward.

Built With

Share this project:

Updates