• 

• 

• 

• 

About the Project

Inspiration

In today's hyper-connected world, it's becoming harder to find a quiet moment without notifications, social media, or endless digital noise competing for our attention. I wanted to build Unwind as a digital sanctuary—a place where technology encourages reflection instead of distraction.

The idea was inspired by the concept of ephemeral journaling and the emotional connection people have with music. I drew heavy inspiration from the cinematic atmosphere of games like Death Stranding (which is why I chose tracks by Low Roar) and the immersive, minimalist interface of streaming platforms like Netflix. My goal was to create an experience where users could write down their thoughts, worries, or emotions, then choose to either let them go through a symbolic release animation or preserve them securely as memories they can revisit in the future.

How I Built It

Unwind is built as a modern single-page application focused on delivering a smooth and immersive experience.

• Frontend: I used Vue 3 with Vite. Vue's Composition API made it easy to manage the cinematic flow, including scene transitions, synchronized music playback, and the Memory Replay typing sequence.
• State Management: I used Pinia to manage the application's state, including the selected mood, active soundtrack, writing session, and navigation throughout the experience.
• Backend & Authentication: I integrated Supabase for authentication and data storage. Google OAuth allows users to securely sign in, while PostgreSQL with Row Level Security (RLS) ensures every user's journal entries remain private.
• Styling: The interface was built entirely with vanilla CSS and CSS variables. Building everything from scratch gave me complete control over the animations, gradients, typography, glassmorphism effects, and the overall cinematic aesthetic.
• Audio System: I implemented a custom HTML5 Audio system using Vue composables to handle playlist management, smooth volume fades, and synchronization between music and UI animations.

Challenges I Ran Into

Creating a timing-driven cinematic experience on the web presented several interesting challenges.

Audio and Typing Synchronization

One of the most difficult parts was building the Memory Replay feature. I wanted the stored message to replay as if it were being typed in real time, finishing exactly 35 seconds before the music ended, leaving enough time for reflection before the soundtrack faded out.

The timing is calculated dynamically using the following formulas:

T_target = (D_song − 35) × 1000

R_type = T_target / L_text

Where:

• D_song = Duration of the selected song (in seconds)
• T_target = Total time available for the typing animation (in milliseconds)
• L_text = Number of characters in the user's journal entry
• R_type = Delay between typing each character (in milliseconds)

This allows every replay to automatically adapt to both the selected soundtrack and the length of the user's journal entry, ensuring the typing animation always completes roughly 35 seconds before the music ends, leaving time for reflection before the soundtrack fades out.

Preserving User Writing During Authentication

I wanted users to be able to begin writing immediately without creating an account. If they later chose to save their memory permanently, they would be redirected through Google OAuth.

Preventing their writing from being lost during this redirect required careful state management. I used localStorage to temporarily preserve the draft and restored it once Supabase completed the authentication process.

Database Design

Initially I considered storing playlist information separately, but that introduced unnecessary complexity. Instead, I designed a compound mood_id format (for example, heavy-2) that contains both the mood and soundtrack information. This simplified the database while allowing the frontend to dynamically determine the appropriate background, soundtrack, and visual theme.

What I Learned

This project taught me much more than building another web application.

• I learned how thoughtful animations, transitions, typography, and music can transform a website into an emotional experience.
• I gained practical experience with browser audio APIs, including volume fading, playback events, and synchronization with interface animations.
• I developed a much deeper understanding of Supabase authentication, PostgreSQL Row Level Security, and managing OAuth flows within a Vue application.
• I also improved my approach to designing application architecture, especially balancing frontend flexibility with backend simplicity.

What's Next

I see Unwind as something that can continue evolving into an even more immersive experience.

My next goal is to replace the current release animations with fully interactive 3D experiences using Three.js and WebGL. Rather than simply burning, dissolving, or planting thoughts, users would be able to interact with these moments in a much more meaningful way.

I also plan to integrate Spotify so users can connect their own accounts and experience personalized playlists that match the emotional themes of the application, making every journaling session feel even more personal.

Built With

• css3
• html5
• javascript
• oauth
• pinia
• postgresql
• supabase
• vite
• vuejs
• webaudioapi