E is for Escape: Immersive 3D Space with Threlte

My E week project for Alphabet Superset is Aurasphere 🪐

This was also my entry for the first official Threlte Hackathon! It was a week long async hackathon so it made perfect timing for an alphabet superset project ✌️ Super happy to have got 3rd place in the Wow track 😌

description

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!

features

• 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

images

tech

• Svelte
• TypeScript
• Tailwind
• Threlte

future enhancements

• using threlte/extras PositionalAudio for the sound
• embedding actual buttons with the HTML component
• more interactive elements with more objects / scenes to visit
• choice of environments / soundscapes