Motion in the Ocean

Opening Screen
Study app in use

Inspiration

We wanted to create something that makes productivity visible, interactive, and rewarding. Instead of staring at a countdown, you’re building and caring for an underwater world that responds to your effort. The goal was simple, turn studying into something you actually look forward to opening.

What it does

Motion in the Ocean is an aquarium-themed study app that combines productivity tools with a playable fish tank game.

🕒 Built-in customizable study timer

✅ Interactive to-do list

🎮 Playable ocean environment

🐟 Add or delete sea creatures freely

🗑 Drag-to-trash deletion system

📝 Field notes section for reflections

⏸ Pause function

🔊 Button sound effects

🍽 Reward mechanic: when you complete a task or your timer ends, fish food falls into the tank and feeds your creatures

How we built it

We built Motion in the Ocean as a browser-based interactive experience using HTML and JavaScript. The interface centers around a soft underwater aesthetic with pixel-style elements and smooth animations. Every creature, coral piece, and strand of seaweed in the tank was hand drawn and animated by us, which gave the world a personal and cohesive feel. We created an interactive canvas where users can move characters, drag and drop sea creatures, and interact directly with the environment. The timer and to-do list are integrated into the game logic so that completing tasks triggers in-game rewards like falling fish food. We focused on making the productivity tools feel like a natural part of the ecosystem rather than separate features sitting next to a game.

Challenges we ran into

One of our biggest challenges was learning and applying JavaScript to make everything interactive. We had to figure out how to control character movement and edit the animal animations so they felt smooth and natural in the tank. It also took time to connect the timer and to-do list to the game so rewards would trigger correctly. Overall, a lot of it was trial and error while learning how to make the game logic and visuals work together.

Accomplishments that we're proud of

We take pride in our ability to successfully and cohesively combine an interactive game with a learning aid. Productivity is boosted by the visual reward that the fish meal reward function presents. Additionally, we constructed an unique aquarium that allows users to freely add or remove animals.

What we learned

We learned a lot about working with JavaScript to build interactive features and connect different parts of an app together. We also learned how important small details are, like smooth animations and responsive controls, in making a game feel polished. Most importantly, we realized that combining productivity with play takes thoughtful design so it stays motivating without becoming distracting.

What's Next

Including an ocean-themed music experience that links straight to Spotify, we hope to deepen Motion in the Ocean's involvement. While working within the aquarium, users will be able to stream their own study playlists straight from the web app by connecting their Spotify account. Everything would be in one peaceful, unified space rather than opening several tabs.