Decimal

Experimenting with Binaural Beats and Web Tech

Decimal is a project from Hyperlaunch exploring the use of the Web Audio API to generate binaural beats right in the browser. Built as a Progressive Web App (PWA) using Astro, the app is an experiment in combining cutting-edge web technologies to deliver a smooth, responsive experience. Decimal has quickly gained traction, with thousands of daily users and session lengths over 20 minutes on average.

The Tech Behind Decimal

Decimal was developed using a stack that embraces modern web capabilities:

• Astro: Chosen 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 that 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. This lets us generate binaural beats dynamically, without relying on pre-recorded audio files. Users can customise their listening experience in real-time, all handled efficiently on the client side.

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

• Nanostores: For state management, we opted for Nanostores. Its lightweight nature fits well with our goal of minimising 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 playground for exploring modern PWA capabilities and new 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 ensures users have 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 it 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 keeping users engaged. With 1000s of daily users and session lengths averaging over 20 minutes, the data suggests that users are finding real value in the experience. We’re using this engagement data to fine-tune the app, improve performance, and experiment with new features.