Relax

An ambience app with five looping nature scenes (fire, birds, rain, waves, forest), each paired with matching audio and a countdown timer for focused relaxation.

🔗 Live Demo: https://vampirenoob.github.io/relax/

Features

• 5 looping video scenes with matching ambient audio
• Countdown timer per scene (customizable duration)
• Mobile-friendly manual start button (works around browser autoplay restrictions)
• Fully responsive design

Tech Stack

• HTML5
• CSS3 (Flexbox, Media Queries, CSS Animations)
• Vanilla JavaScript

Structure

Relax/
├── index.html
├── style.css
├── startRelax.mp4
├── birds/
│   ├── birds.html
│   ├── birds.css
│   ├── birds.js
│   ├── birds.mp4
│   └── birdsAudio.mp3
├── fire/
│   ├── fire.html
│   ├── fire.css
│   ├── fire.js
│   ├── fire.mp4
│   └── fireAudio.mp3
├── forest/
│   ├── forest.html
│   ├── forest.css
│   ├── forest.js
│   ├── forest.mp4
│   └── forestAudio.mp3
├── rain/
│   ├── rain.html
│   ├── rain.css
│   ├── rain.js
│   ├── rain.mp4
│   └── rainAudio.mp3
└── waves/
├── waves.html
├── waves.css
├── waves.js
├── waves.mp4
└── wavesAudio.mp3

Note

Video and audio material is sourced from open, freely accessible platforms and is used for demonstration purposes only.

Contact

Feel free to reach out via GitHub or Instagram:

• GitHub: @VampireNoob
• Instagram: @vampirenoob