live preview > aurasphere
made for the Threlte Hackathon 2023
The application features an interactive 3D scene, the Aurasphere, rendered using the Threlte library.
My initial inspiration was thinking about how when people are experiencing an anxiety attack/panic attack or even just feeling a bit stressed and needing a breather, it could help to have an app to help ground them and reconnect them back to the present moment. It's an easy and friendly way to do a little breathing exercise and something to focus on in times of anxiety or stress!
- users can inhale and exhale in time with the movement of the planet for a calming experience.
- ambient sound can be toggled on and off by clicking on the planet.
- users can explore the rest of the scene which provides sensory visuals and animations.
- hover interactions and animations
- works on mobile
- Svelte
- TypeScript
- Tailwind
- Threlte
- using threlte/extras
<PositionalAudio/>for the sound - embedding actual buttons with
<HTML/> - more interactive elements with more objects / scenes to visit
- choice of environments / soundscapes