Flow State
FlowState is a friendly little planner that looks at your day in a whole different way. Instead of counting minutes, it helps you watch your energy. You start by naming a task and telling it how heavy that task feels. Light, medium, or heavy. Then the task becomes a smooth little stone you can pick up and drop into a stream. As you add stones the water level rises in front of you, so you can actually see how full your day is getting. If you push too far the water shifts to a warm coral color and a soft flute note plays to let you know it's time to breathe.
You can tap any stone to mark it done, and tap it again if you change your mind. Dragging stones around feels natural, whether you're on a laptop or holding your phone. There's a search box for when your list gets long, a mood check with five little faces so you can note how you're feeling, and a small weekly view that shows how each day looked at a glance. A focus timer sits quietly in the corner when you need to settle into one thing, and an undo button is always there in case you tap something by accident. If you like paper, you can print your day in a clean layout.
Everything lives right on your own device, so it's there whenever you open it. You can add it to your home screen and it will open like a normal app. The whole thing is soft and calm, with rounded corners, gentle colors, and a small flute sound on every tap. No rush, no noise, just a friendly way to see your day and take care of yourself.
Tech stack
- Vercel
- Cursor
Links
Prompt
Build me a website called FlowState. It's a simple daily planner that helps you manage your mental energy instead of your time. I don't code, so please give me everything ready to save and open.
The idea (so you understand what to build):
Each day you have an "energy budget." You add tasks, and each task is a "stone" with a weight: Light, Medium, or Heavy. You drop stones into a "Stream" — a water column that fills up. If you add too many heavy stones, the water turns coral and a soft warning plays. This helps you avoid overloading yourself.
How to give me the files:
Please give me separate files, not one big HTML file. For example:
index.html (the page)
css/styles.css (the design)
js/audio.js (the sounds)
js/state.js (saving data)
js/ui.js (the buttons and interactions)
js/pwa.js and sw.js (so it can be installed and work offline)
manifest.webmanifest
icons/ folder with a favicon and two app icons
a short README.md explaining how to open it
Do not put CSS or JavaScript inside the HTML file. Keep everything in its own file.
Look and feel:
Soft, calm colors: sage green, soft blue, warm peach, off-white. Rounded corners, gentle shadows, frosted-glass panels.
Clean and modern. Nothing harsh or bright.
Works perfectly on a phone and on a computer. Never breaks or scrolls sideways on small screens.
No "animation on/off" switch. Just automatically respect the user's system setting for reduced motion.
Sounds (very important):
Every click and action should make a soft flute sound — gentle and pleasant, not a click or a beep.
Each sound must last at least 2 seconds.
Each sound should start quiet and grow a little louder as it plays (a slow swell), then fade out.
Different actions get different notes: adding a stone, dropping it in the stream, finishing a task, and the overflow warning should each sound different but all soft flute tones.
Features I want (all must work):
Add a task with a name and pick Light / Medium / Heavy.
Tap a task to drop it into the stream. Tap again to mark it finished. Tap a finished task to undo that.
Drag and drop tasks between the stream and the waiting list (works with finger and mouse).
Long-press or right-click a task to rename it, change its weight, or delete it.
A capacity slider (4 to 24) that fills the water level live.
A daily "energy check-in" with five emoji buttons.
A small 7-day overview (a heatmap) showing how full each day was.
A search box to filter tasks.
An undo button (and Ctrl+Z) so nothing is ever lost by accident.
A small pop-up message after important actions, with an Undo option.
"New day" and "Clear finished" buttons.
Export my data to a file and import it back.
A "Print today's plan" option that prints a clean summary.
A focus timer with 15/25/50 minute presets and a circular countdown.
A fullscreen button.
Installable like an app (PWA) so it can be added to the home screen and work offline.
A cool picture for the browser tab icon — a blue water droplet inside a golden circle.
Keyboard shortcuts: N for new task, F for fullscreen, Ctrl+Z to undo, Esc to close windows. Include a small help card listing these.
Rules (please follow all of them):
Do not put any words like "free", "private", "no account", "offline", "open source" or similar marketing text anywhere on the page.
No accounts, no sign-up, no ads. Everything is saved on the user's own device.
Multi-file only — never one big HTML file.
No frameworks, no external libraries, no CDN links.
Everything must work when I open the files on my computer, and it must work well on a phone.
Please give me complete, ready-to-save files with nothing missing.1 like · 1 comment · 1 view
Comments (1)
Never seen something like this,<div>Gonna try it out</div>