I built Sonetra's mobile and web experiences, bringing guided wellness journeys to life with custom glass shaders, video-driven interfaces, and fluid interactions.

Sonetra brings mindfulness, body practices, and personal reflection into one experience. My work focused on making its expressive visual language work as an interactive product, from the first animated introduction to a saved session someone can return to.

The challenge was keeping moving imagery, refractive controls, and multi-step journeys coherent. A glass button has to follow the video beneath it. A session has to remember where someone stopped. Both details matter.

Ocean, sand, and breath introductions set a slower pace before the main app. The welcome and authentication screens continue that atmosphere, with translucent controls over animated imagery and options for passkeys, Google, Apple, and email.

The home experience separates Mind, Body, and Custom into distinct palettes and imagery. People can explore a practice, save a favorite, or build a path around their own goals. Custom journeys turn those choices into an ordered sequence, so the next step stays clear.

The journey includes mood check-ins, gratitude and journaling prompts, grounding exercises, guided breathwork, body scans, and photo capture. Progress indicators, duration choices, and a closing feedback interaction carry people through the session. These are connected steps with state and media handling behind them.

I implemented custom Skia runtime shaders in React Native. Decoded video frames become the image source for the glass effect. Signed-distance shapes define the panels, edge refraction distorts the underlying image, and blur, tint, opacity, and reflected highlights finish the material.

A shared provider registers multiple glass elements and passes their geometry into the renderer. That lets buttons, cards, and other controls share the same moving background. Layout measurement and scroll offsets keep the effect aligned with the interface, while Reanimated shared values drive changes in scale and appearance.

The video pipeline resolves local or remote assets, waits for the first decoded frame, and supports looping, pause, and seek controls. Working through those details was essential to making the visual treatment usable across screens.

Favorites and activity history give the experience continuity. The flow engine persists session progress through Convex and coordinates media uploads before saving step snapshots. Preferences use Zustand with MMKV storage and an AsyncStorage fallback. People can also choose which introductions appear and how often they play.

The Sonetra website translates the same visual world into large cinematic scenes, oversized typography, and glass controls. The web implementation uses Next.js and React, GSAP animation, displacement-based glass effects, and WebGL chroma-key processing for video layers. The site introduces the product through motion and leads visitors toward the app.

Mobile: React Native, Expo, TypeScript, Expo Router, React Native Skia, Reanimated, Gesture Handler, Expo Video.

State and services: Zustand, MMKV, AsyncStorage, Convex, Clerk, React Hook Form, Zod.

Web: Next.js, React, GSAP, WebGL, SVG displacement filters.

An implemented mobile and web experience that connects visual experimentation with product engineering. The work spans reusable rendering components, media playback, authentication, personalized flows, and session continuity.

Explore the website: https://www.sonetra.ai/