Giter Site home page Giter Site logo

zen-focus / zen-focus-web Goto Github PK

View Code? Open in Web Editor NEW
12.0 2.0 0.0 724 KB

Pomodoro Timer with Breathing Meditation Support and Soundscapes

Home Page: https://zen-focus.netlify.app/

HTML 1.79% CSS 18.19% JavaScript 80.01%
app meditation meditation-app pomodoro productivity webapp

zen-focus-web's Introduction

Zen Focus

A Minimalistic Pomodoro Timer with Breathing Meditation Support and Soundscapes

App Banner

Table of contents

About the App

Zen Focus is a pomodoro timer created with the intention of promoting concentration and flow. It offers a small selection of soundscapes to stay focused during work, as well as a breathing meditation feature that can help lower stress and anxiety and keep you in the present moment.

Usage

Pomodoro Timer

The interval and break lengths of the pomodoro timer can be freely adjusted in the settings. If you change the time of the currently running interval or break, the change will automatically apply to the next iteration as to not interrupt your original work flow. If you want the changes to take effect immediately, simply click the reset button in the app's navigation bar. This will start the current interval over in its new length.

Zen Focus is designed to be as unintrusive as possible to not interrupt your flow or meditation while still providing structure. For this reason, the app will indicate the end of any interval or break with a chime sound, but only start running the next interval or break once you confirm you are ready to move on.

If you want to skip to the next interval or break, you can find a skip button in the bottom right corner of the screen.

Zen Focus Legend

Meditation

For every break, the timer will prompt you with the choice of taking a few minutes for a breathing meditation. The meditation is visually guided, inviting you to adjust your breathing to the expansion and conctraction of a circle on screen. The length of each inhalation, exhalation, and breath hold can be adjusted in the settings. The app will soon offer a selection of default options to choose from, until then you might want to experiment with different breathing techniques. Here are some examples to get you started:

  • Box Breathing: Inhale 4s, hold 4s, exhale 4s, hold 4s
  • Triangle Breathing: Inhale 4s, hold 4s, exhale 4s
  • 4-7-8 Method: Inhale 4s, hold 7s, exhale 8s

Of course the meditation option is also accessible through the navigation bar whenever you need it.

Soundscapes

Another feature Zen Focus offers (that will still be expanded) are soundscapes. You can layer each sound on top of each other and adjust the individual volume to create a unique ambient that is tailored to your needs and preferences.

Technical

Technologies Used

React HTML CSS

Development Setup

  1. Clone the repository
  2. Install dependencies with npm install
  3. Start the app with npm start

To Do List

You can find a roadmap for this project here.

Contributing

  • Found a bug or have a concrete feature request? Open a corresponding issue via the Issues Tab.

  • For any other feedback, questions, or ideas, please use the Discussions Tab to reach out.

License

zen-focus-web's People

Contributors

mhanki avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

zen-focus-web's Issues

[BUG] Animation doesn't wait for reset after interval time has been changed

Describe the bug

After changing the time of the currently running interval, the timer animation immediately adjusts to the new time instead of keeping the initial one.

Expected behavior

The animation should only update to the newly set time after the reset button has been clicked (the same way it works for the countdown display).

Fix soundscape issue

Sounds don't stay selected after meditation display has been opened.
Issue does not exist when opening the settings menu.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.