A Small Question That Surfaces When You Focus a Field

Fecit has a Guide Mode. The star-shaped fecit icon speaks in a bubble — “What are you hoping for?”, “What’s standing in the way?” — and walks you through filling out a task one step at a time. I like it, but it had one limit: it’s a mode.

To get the guide, you first have to enter Guide Mode. But the moment people need help most is when they open an empty expectation field, watch the cursor blink, and pause — “what do I even write here?” That moment usually lives outside the mode.

So I took the guide out of the mode. Even when you’re not in Guide Mode, focusing a field surfaces that field’s question in the same place — the top bar. Right there in the context you’re writing in, the answer arrives before you ask.

What “out of the mode” means

Guide Mode is active. You turn it on, follow the steps, turn it off. A hint should be passive — sitting quietly, appearing beside you the moment you need it, gone the moment you look away.

So focus is the trigger. target / expectation / obstacle / stakes / result / retrospect, plus the title and the tactics (description) — focus a field that has a question, and the question appears; blur, and it closes. No separate entry, no next/back buttons. It’s just there.

Not building it twice

My first instinct was “let’s build a hint bar.” But Guide Mode’s bar (GuideBar) already lived in the same spot, in the same shape: icon + bubble + (in guide mode) a step counter and navigation.

Instead of building a new one, I added a hint mode to GuideBar. In hint mode it hides the step counter and navigation, leaving only the star icon and the question bubble. Position, color, animation all land identically to guide mode — an extension of the idea that two surfaces of the same nature should look the same.

On by default, but switchable

A helpful feature is noise to someone else. For a user who knows what to write just from the field name, a question popping up every time can grate.

I added a new preference field, showFieldHints. Default on — I think this should be the default experience, especially for first-time users. The toggle went into both mobile and desktop settings, and since it syncs through the server, turning it off on one side carries to the other.

When the value is empty (null), it’s treated as on. Default on for everyone, no migration needed.

The star was already there

I chose the star as the hint bar’s icon. Fecit’s star is already alive across the app — it bounces when you complete a task, twinkles now and then, swirls when you create a memo. That animation engine is AnimatedStar.

At first I hand-wrote the hint star’s entrance animation. Something felt off, though. It moved a little, then cut. The culprit was the initial value — I rendered the star at full size, then the effect shrank it to zero and grew it back, so it read as “appears, then stutters.”

That’s where I stepped back. Why am I writing this by hand? The engine every star in the app uses already exists. I added a haptic-free, rotation-free pure scale pulse trigger (pop) to AnimatedStar and swapped the hint star to it. Each time the question changes, the component remounts and the pop replays. The hand-rolled animation got deleted.

The lesson is plain — if the same kind of motion already lives in the app, look at it before writing a new one.

A little more fun

If the question is always identical, the character dies. So I built a small pool of two or three phrasings per field (guideHints) and pick one each time you focus. For target: “Where are you right now?” / “What’s your starting point?” / “Where do things stand?”

A small trap here. Pick randomly on every render, and the question changes with every keystroke — it flickers. So the question is re-picked only when the focused field changes (useMemo). Refocus the same field, you get a new phrasing; stay in it, and it holds.

I left Guide Mode’s questions untouched. A structured flow is better with consistent wording, so the variation lives only on the hint side.

On the create screen, without closing

The hint bar covers the top. On the create screen, that’s where the “create” button lives, so an open hint hides the button. To create, you’d have to close the hint first — a small friction.

So the create screen’s hint bar has a + button on the right. You can create the task right there without closing it. The detail/edit screen has no “create,” so the button doesn’t appear — same component, different by context.

Two input boxes, two event orders

Once it was built, there was a bug that flickered in only one direction.

• Move focus from title → tactics: only the bubble changes. (correct)
• Move from tactics → title: the bar disappears and reappears. (bug)

Same “field switch,” yet only one direction flickered — odd. Following it down, the culprit was the event order.

The title is a contenteditable holding chips; the tactics is a rich-text editor. Different input types, so blur and focus fired in different orders. In one direction focus(next) came before blur(prev), so the hint field swapped straight over. In the other, blur came first, so it passed through a brief “nothing here” state before refilling — and in that instant the bar unmounted and remounted.

The fix is a common pattern. Don’t close on blur immediately — close on the next tick. If another field gains focus in between, cancel the scheduled close. It only closes when focus truly goes nowhere. Whatever order blur and focus arrive in, one tick bridges the gap.

On top of that, the chip input sometimes re-fired its focus event mid-typing. To keep a closed hint from coming back to life because of that, I added a guard that ignores re-focus events for the same field.

Other small touches

• On desktop the bubble and its tail were detached — the container’s gap had pushed the tail away. I dropped the gap and gave the step counter its own spacing.
• The create modal’s header height was misaligned with the hint bar. I set the header to match the bar (44px).
• On the detail screen I turned off title auto-focus, so a hint doesn’t pop the instant you arrive. The create screen does the opposite — it’s a start-writing-now flow, so auto-focus stays, and a first question surfacing right away feels natural there.

Beside you, not a mode

The big change is one line — take the guide out of the mode and set it beside you. Not something you switch on and off, but something that’s there when you need it and steps back when you look away.

It took a fair number of decisions to get a single star to pop and offer a question. Mode or ambient, build or reuse, default on or off, and a one-directional flicker two input boxes conspired to make. That a small surface holds this many decisions is, as always, both surprising and familiar.

The best guide doesn’t make you click “Help.” It just sits there, asks one line when you need it, and quietly steps back the moment you start writing the answer.