Blossom

Focus mode extension for chromium-based browsers. Plant cherry blossom trees and unlock fire and glowberry trees (😱) and expand your garden

Comment

Blossom

Grow your garden while you focus! 🌸

Blossom is a gamified productivity productivity companion built as a Chrome Extension. It helps you build better work habits, eliminate distractions, and visually rewards your focus time by letting you grow a beautiful virtual garden.

✨ Notable Features

  • ⏱️ Focus Timer & Tree Planting: Start a focus session by planting a seed in your virtual garden plot. As the timer ticks and you stay focused on your work, your tree continuously grows through multiple aesthetic stages!
  • 🛡️ Domain Blocker: Keep distractions strictly away. Blossom's domain blocker allows you to add unproductive websites (like social media or news feeds) to a blocklist to prevent you from losing focus during an active session.
  • 💰 Coins & Progression System: Time is literal money! Stopping your focus time converts your hard work entirely into coins. The longer you focus, the more coins you'll earn.
  • 🛒 The Garden Shop: Got some extra coins burning a hole in your pocket? Visit the Garden Shop to spend them on unique, beautiful new tree variants (like the radiant Glowberry or blazing Fire trees).
  • 🗺️ Interactive Garden Plot: You don't just click a button to plant; you physically click anywhere on your draggable garden plot to decide exactly where your next sprout belongs, allowing you to build an expanding and highly customized forest over time!

📖 How to Use Blossom

Setting Up the Blocker

Before you start a focus session, you can lock down your distractions! To add domains to your blocklist:

  1. Open the extension popup.
  2. Click the Settings (Block) icon in the top left corner.
  3. Type in any distracting website (e.g., reddit.com or twitter.com) into the input field and hit Add.

Starting a Focus Session & Planting

  1. Click the big primary button that says "Click to start timer". This will smoothly transition you into "Planting Mode".
  2. You will be prompted to pick your tree. Use the Tree type dropdown just below the garden plot to select a tree (e.g., standard Blossom, or any specialized tree you bought from the shop).
  3. Plant it! Click anywhere inside the visual garden plot area to plant your seed.
  4. As soon as you click the plot, the timer starts running. Get to work! Your tree will visually evolve through several growth stages the longer you stay focused.

Ending a Session & Earning Coins

  1. When you're ready to take a break or finish your task, click "Click to stop timer".
  2. A beautiful animation will play as your accumulated focus time is converted into shiny coins. You'll literally hear the coins rolling in!

Using the Garden Shop

  1. Click the Coin counter in the top right corner of the extension to open the Garden Shop.
  2. Here, you'll see a catalog of exclusive trees.
  3. If you have enough coins from your hard work, click Buy on any tree type to unlock a unit.
  4. The next time you start a timer and enter "Planting Mode", your newly purchased trees will appear in the "Tree type" dropdown menu!

🚀 Installation

  1. Clone this repository or download the source code to your machine.
  2. Run npm install to install necessary required dependencies.
  3. Run npm run build to generate the compiled extension files.
  4. Open Chrome and navigate to chrome://extensions/.
  5. Enable Developer mode using the toggle in the top right corner.
  6. Click Load unpacked and select the build folder from this project directory.

🤝 Contribution

Suggestions, bug reports, and pull requests are always enthusiastically welcomed! Feel free to open an issue or submit a Pull Request to help make Blossom even better.

This project was bootstrapped with Chrome Extension CLI.

Share this project:

Updates