Hyperanchor · Productivity · Web

In progress

A keyboard-first planner for the day, week and month

I designed Hyperanchor and built it with Claude Code. It’s live at hyperanchor.app and free to use.

Role
Design, and the build with Claude Code
Built with
Next.js, TypeScript, Tailwind CSS, Postgres
Platform
Web, on desktop and phone
Status
Live, free, still changing

Overview

Challenge. Adding a task should take one keystroke, and a whole week should fit on one screen. Afterwards, the analytics show how the days went.

My role. I designed it and built it with Claude Code, from the first design handoff to the live site: the interface, the landing page, the API and the database.

Status. Live and free, with Google sign-in. I’m still changing it: ten rounds of updates in two and a half weeks, one of them a redesign I rolled back.

What exists today

Day. Today’s tasks: To do on top, Completed folded underneath. A finished task gets its check animation, then slides down. Titles and notes are edited in place, and a past day offers to move what’s left to today. Today also gathers what was left open during the past week, with one button to move it over.

Focus. One task at a time, on the top card of a small stack. Done finishes it and brings up the next one, and Not now sends it to the back of the line. A thought that comes up on the way goes into a field below without leaving focus. I made it with people with ADHD in mind: less to choose from, less noise and one obvious next step.

Week. The same tasks across the week, day by day, the finished ones under the rest.

Month. A calendar grid. A click on a day opens it in a popover: check tasks off, add one or open the day.

Analytics. The week, month or year in numbers: tasks completed, the completion rate, the daily average and the streak, each against the period before. Then a chart by day or month, a heatmap of the year, the best weekday and everything left open.

Keyboard. N for a new task, arrows to move, Space to finish, Enter to edit, ⌫ to delete, T for today, D, W, M and A for the views, F for focus, a comma for settings and ? for the whole list. Every action can be undone.

Sign-in. The home page is the sign-in itself: “Own your day.” with the last word turning to week and month, one Google button, and beside them five short scenes of the app that play one after another.

hyperanchor.app

How it’s built

I built it with Claude Code, one pull request at a time, on Next.js with the App Router, TypeScript and Tailwind CSS. Sign-in is Google through Auth.js, the tasks live in Postgres on Supabase, and it runs on Vercel.

Instant. The screen changes the moment you act. Typing saves after 600 ms, and changes to one task reach the server in order. If a request fails, the days on screen reload.

Private. Every request checks whose tasks they are, and the table has row-level security on top.

Design

One accent. Neutral grays, black buttons and one accent color: blue, or orange or green in Settings. It means the same thing everywhere: today, done and progress. Red is only for deleting and for a drop, green only for a rise in analytics.

Small moments. The check pops and draws itself, a day with everything done sets off confetti, and the selection in the sidebar slides to the view you pick. In focus, a finished card lifts away and the next one rises into place.

Light and dark follow the device until you pick one in Settings. The choice applies before the page draws, without a flash.

What’s next

A mobile AI agent that helps people with ADHD play to their strengths, on the web and iOS.