React Native · Skia
Next.js · WebGL
About Sonetra
Sonetra is a guided wellness app for mindfulness, body practices, and personal reflection, set in a visual world of skies, water, and slow movement.
I built it on two surfaces: a React Native app and a Next.js website. Most of the engineering went into making that visual language hold up as a working product, from the first animated screen to a saved session someone can come back to.
- 07Session formats
- 03Home directions
- 04Sign-in methods
- 02Surfaces: app & web
Start with a moment of pause
The intro screens open on ocean, sand, and breath. Controls sit as translucent glass over animated imagery, so the first thing a new person does in the app is slow down.
Sign-in supports passkeys, Google, Apple, and email.
- Passkey
- Apple
Choose a direction
Home splits into Mind, Body, and Custom. Each direction has its own palette and imagery, so you can tell where you are before reading a label. Inside a direction, practices sit in a swipeable carousel.
Make each session feel considered
Mood check-ins, gratitude prompts, journaling, grounding, breathwork, body scans, and photo capture. Each one asks for a different kind of input, but they share a frame: a title, a gentle instruction, and one clear next step.
01Mood check-in
02Daily gratitude
03Breathwork
04Grounding
05Listen to the Earth
06Body scan
07Session length
08Voice reflection
09Capture a moment
10Feedback
The glass is part of the renderer
In the app, the glass is drawn by custom Skia runtime shaders in React Native. Decoded video frames are the image source for the effect, so the glass bends whatever footage is playing behind it.
The stage below is a WebGL version of the same idea, written for this page. Move across it to push the lens around.
Move across the imageOn this page: WebGL fragment shader, written for this pageIn the app: React Native Skia runtime shader over video frames
Build for the next visit
Favorites, activity history, and session progress persist, so someone can stop halfway through a practice and pick it up later. On the device, session state lives in Zustand and is saved with MMKV and AsyncStorage. Convex keeps the synced record, and Clerk handles identity.
Carry the experience onto the web
The marketing site uses the same imagery at a larger scale. It's built with Next.js and React, GSAP for scroll motion, displacement-based glass, and WebGL chroma keying so cut-out video sits cleanly on the page.
Visit sonetra.ai ↗
What it runs on
One codebase per surface, sharing the visual language.
Mobile
- React Native
- Expo
- TypeScript
- Expo Router
- React Native Skia
- Reanimated
- Gesture Handler
- Expo Video
State & services
- Zustand
- MMKV
- AsyncStorage
- Convex
- Clerk
- AWS
- React Hook Form
- Zod
Web
- Next.js
- React
- HeroUI
- GSAP
- WebGL
- SVG displacement filters