Pocket Worlds

• 

  Home Page

• 

  Select a World

• 

  Forest

• 

  Cloud Kingdom

• 

  Bubble Bay

• 

  Avatar Shop

Inspiration

Pocket Worlds began with a question: can a small act of care feel like a meaningful adventure?

Miniature landscapes invite us to look closer. A glowing seed, a stranded creature, or a sleeping garden can become an entire story when the player’s actions visibly change the world. We wanted that sense of discovery without combat, overwhelming instructions, or a demanding time commitment.

The result is fantasy adventure built around restoration, curiosity, and personal expression.

What it does

Pocket Worlds connects ten miniature fantasy adventures through a persistent player avatar, collectible rewards, pets, and progression.

Whispering Forest is the current immersive WebXR experience; the complete ten-world collection is also playable on desktop. In the Forest, players pick up a glowing seed, plant it, awaken the Heartflower, and guide fireflies home.

The opening teaches through a clear action and visible consequence: place the seed, watch life emerge, then discover what changed.

Across the collection, players restore habitats, solve environmental puzzles, uncover hidden keepsakes, and earn coins. Optional challenges, daily replay rewards, and aspirational shop items provide longer-term goals. Completing every world unlocks a celebratory conservatory with special rewards, a music box, and an avatar-and-pet dance party.

How we built it

We built Pocket Worlds using React, TypeScript, Three.js, and WebXR.

Game rules are separated from input handling. The Forest’s tracked-hand implementation reads thumb and index-finger joint poses to translate pinching, movement, and release into seed interaction, while retaining desktop controls and controller fallback.

Custom procedural assets provide sculpted terrain, branching vegetation, intricate reefs, distinctive creatures, and world-specific architecture. Shared rendering tools maintain visual consistency without making every world identical.

Progress and earned customization are stored locally.

Challenges we ran into

The central challenge was preserving simplicity without making the experience feel shallow.

We also had to move beyond primitive, toy-like scenery while protecting interaction targets, equipment attachment points, saved progress, and browser performance.

Reliable progression required particular care: regression tests address unearned keepsake purchases, duplicate rewards, and concurrent-save risks. Hand tracking introduced another important distinction—implemented joint-based input is not the same as verified physical-headset behavior.

Accomplishments that we're proud of

We created ten distinct environments, a shared customizable traveler, ten individually modeled pets, and rewards that connect short activities into a larger journey.

The opening has a complete restoration moment rather than a tutorial disconnected from play. Returning players have discoveries, challenges, and visible customization to pursue.

Our latest validation passed 123 automated tests, TypeScript checks, and the production build. Browser verification covered all ten world entrances and exits, Forest planting, and Bubble Bay’s rescue activity.

What we learned

Immediate feedback makes unfamiliar interactions easier to understand.

Meaningful progression is more than increasing a number: it gives players something to discover, express, and anticipate.

We also learned to distinguish visual polish, automated correctness, emulator evidence, and real-device validation. Each answers a different question.

What's next for Pocket Worlds

Our immediate priority is physical Quest validation: complete hands-only journeys, comfortable seated reach, onboarding clarity, and sustained performance.

Next, we want to extend immersive interaction across the collection and refine return visits through player feedback—preserving short, satisfying sessions and progression that rewards curiosity.

Built With

• api
• audio
• css3
• html5
• javascript
• react
• three.js
• typescript
• vite
• web
• webgl
• webxr