Nibble 🐹

A cozy little focus buddy that hands you one tiny bite of the thing you've been dreading. And when it notices you've frozen, it makes the bite smaller on its own. No lists, no streaks, no shame, and nothing ever leaves your machine.

I built this for the Design4Future hackathon. The whole idea: I can stare at an email I've been avoiding for three weeks and just... not start. Every to-do app hands you a list to manage. Nibble hands you one bite to do.

🎬 Demo

• Video: https://www.youtube.com/watch?v=cMsUGbRDI6o
• Live (web/PWA): https://nibble-sepia.vercel.app
  • want to see the headline trick fast? add ?freeze=5 so it notices a stall in ~5s: https://nibble-sepia.vercel.app/panel.html?freeze=5

The one trick

You give it a dreaded task. It gives you one bite ("open it and read just the first line"). You freeze and flick to another tab. A soft ring fills around the little guy ("...noticing you've gone quiet"), and then on its own the bite shrinks to "just type Sam's name in the box." Nothing was clicked. Goblin.tools and the rest make you press "break it down" — this watches for the freeze and does it for you.

Run it

It's plain HTML/CSS/JS, no build step.

As a web app: serve the folder with anything static, e.g.

npx serve .

then open index.html (or just open the live link above).

As a Chrome extension: chrome://extensions → turn on Developer mode → Load unpacked → pick this folder. Click the icon for the side panel; the little bubble shows up on pages; gear → options for settings.

Same folder is both the web app and the unpacked extension — Chrome reads manifest.json, the web reads manifest.webmanifest.

How it's put together

• src/decompose.js — turns a task into a ladder of tiny bites. Falls back to a small built-in library; uses Chrome's on-device Gemini Nano (Prompt API) to help with tasks it doesn't recognise.
• src/stall.js — the freeze sensor. dead-simple 3-state read of your own activity (engaged / idle / stuck) with a bit of smoothing so it doesn't twitch.
• src/panel.js — the side panel + the whole loop (start → bite → notice → shrink → win → recap).
• src/bubble.js, content.js — the floating companion on a page.
• everything saved in localStorage (mirrored to chrome.storage for the extension). no server, no account, no network calls. works offline.

Privacy

There's no backend. The task text, the activity read, and your settings stay on your device. Works in airplane mode.