Decimal

Experimenting with Binaural Beats and Web Tech

Decimal is a project from Hyperlaunch that explores the use of the Web Audio API to generate binaural beats directly in the browser. Built as a Progressive Web App (PWA) using Astro, this app experiments with combining cutting-edge web technologies to deliver a smooth, responsive experience. Decimal has rapidly gained traction, with thousands of daily users and session durations averaging over 20 minutes.

The Tech Behind Decimal

Decimal was developed with a stack that makes the most of modern web capabilities:

• Astro: Selected for its ability to deliver fast, minimal JavaScript on the client side, Astro helps keep Decimal lightweight and snappy. This framework allows us to serve only what’s needed, ensuring the app loads quickly and performs well across all devices.

• Web Audio API: The core of Decimal’s functionality. The Web Audio API allows for real-time audio processing directly in the browser, enabling dynamic generation of binaural beats without pre-recorded audio files. Users can customize their listening experience in real-time, all efficiently handled on the client side.

• Million.js: We used Million.js for a highly performant virtual DOM, optimizing rendering processes. This ensures that even with frequent updates and dynamic audio adjustments, Decimal remains responsive and fluid.

• Nanostores: For state management, we chose Nanostores. Its lightweight design aligns with our goal of minimizing overhead and keeping the app fast. State changes are minimal and efficient, directly tied to user interactions.

• Satori: Satori was used for handling server-rendered interactive components, providing flexibility in how we serve content and ensuring a consistent experience across various devices and network conditions.

Experimenting with PWAs and View Transitions

Decimal isn’t just an audio experiment; it’s also a platform for exploring modern PWA capabilities and innovative approaches to view transitions:

• Progressive Web App: As a PWA, Decimal can be installed directly from the browser to your home screen, functioning like a native app. This provides users with easy access without the friction of traditional app stores. Features like offline functionality and push notifications are part of the roadmap.

• View Transitions API: We’ve been experimenting with the View Transitions API to create seamless transitions between different states within the app. This is still a relatively new area but shows promise for creating smoother, more engaging user experiences without the jarring reloads typically associated with SPAs.

User Engagement

Decimal’s design isn’t just about functionality; it’s about user engagement. With thousands of daily users and session durations averaging over 20 minutes, the data indicates that users find real value in the experience. We’re using this engagement data to fine-tune the app, improve performance, and experiment with new features.