Simple, but powerful breathing techniques visualized in a minimal 3D environment. Controls and animations are easy, intuitive and effective. Babylon.js is an amazing abstraction on top of WebGL and allows wonderful animations with little boiler plate. Main scene is based in components/practice/practice.component.jsx and while a bit messy, allows reusage across tips. Pan & zoom are supported on almost any browser.
Commit in master triggers a deploy on Netlify. Firebase is used for DB and authentication.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Tips are really easy. Each tip has a html file and a json file. Html file sets the scene up and allows users to view the tip. Json file contains the attributes of each breathing tip. Let's check /tips/rest.json.
{
"hold_empty": 1,
"inhale": 4,
"hold_full": 7,
"exhale": 8,
"repeat": 6,
"envmap": "/assets/079.env"
}
We always start with empty lungs. We hold for a second, inhale for 4 seconds, hold like this for 7 seconds and exhale slowly for 8 seconds. Repeat 6 times. The background image and reflections on the ball are controlled by the environment map. The ones included here should be free to use.
To add a new tip it is not required to have advanced coding skills. To add a new tip, clone the repo and create a PR with following changes:
- new json file
tip-name.jsonwith a valid "hold_empty", "inhale", "hold_full", "exhale", "repeat" and "envmap" attributes - env map generated most easily through the sandbox method described here
Credit goes to NOEMOTION HDRs
Credit to the BBC