For the new bliro app, an interactive voice assistant interface should be developed that intuitively and dynamically represents the status of the transcription process in real time. The aim was to visually convey various user interaction states — including standby, active transcription and error handling — via a responsive 3D motion scene without affecting mobile performance. In addition, individual event triggers had to be seamlessly integrated into the existing React Native infrastructure to trigger the status change in real time.
By developing a tailor-made 3D motion system based on Spline, the various transcription phases of the bliro app could be visually and intuitively presented. A specially implemented custom webhook architecture controls the change between the defined interaction states (standby, active transcription, error handling) in real time and seamlessly synchronizes the 3D experience with the app backend. The integration into the React Native app was tailored to high efficiency and short load times through targeted performance optimizations.
As part of the website relaunch, we developed an animated 3D sphere for bliro as part of the new visual appearance. Inspired by the topics of AI, voice assistance and transcription, the sphere should symbolize dynamism and progress. The response to the new element was so positive that Sphere became part of the brand beyond the website.
The Sphere has been taken to the next level — from a design highlight to a functional component in the user interface. Our goal was to make the transcription process more intuitive and transparent through dynamic visual feedback directly in the app.
We designed a 3D motion system in which the Sphere adapts its display depending on the process phase: smooth floating in standby, increased pulsation during transcription and visual change in case of error conditions. The transitions were deliberately kept smooth and subtle to ensure a natural user experience.
To control the 3D sphere, we developed a webhook architecture that transfers status changes in the app reliably and in real time to the 3D sphere. During implementation, we supervised the technical connection and ensured that all events were correctly synchronized with the Sphere.
In order to display the Sphere with high performance even on mobile devices, we provided targeted recommendations for performance optimization: reduced geometry, optimized assets and adapted animation curves for stable load times and high frame rates.
By integrating the Sphere as an active interface element, bliro received a strong, new level of interaction. Status changes are perceived more clearly, the platform appears more dynamic and brand perception has been sustainably modernized.
