A Star at the Gate — A Word From the Star

fecit has these things called “gates.” When you’re about to start something heavy, it suggests you sketch a one-line plan first. When you finish a task, it suggests you leave a line of reflection to close it out. Just a small invitation, right at that moment. Nothing forced — a soft nudge you can skip with “start anyway” or “complete anyway.”

Functionally it worked fine. But the longer I looked at it, something nagged at me. The gate — however softly it spoke — felt like a system warning. A card sliding up from the bottom, a small star icon, a message, buttons. The tone of every “Are you sure?” dialog you’ve ever seen.

The problem was the tone. The same suggestion changes temperature depending on whose hand offers it. From a cold dialog it sounds like an obligation; from a companion beside you it sounds like a hand lent. fecit wanted the latter, and fecit already has that companion — the star on the assistant tab.

Let the star hand it over

The direction was clear: make the gate feel like “a word the star hands you,” not “an alert the system raises.”

The first step was, surprisingly, to remove something. I made the modal’s white card background transparent. Suddenly the star and the speech bubble floated over the dimmed screen. Not a message trapped inside a card, but the star here with you, right now — the same visual language as the assistant tab, where the star floats in the center of the screen.

Removing it created a new problem, of course. The star blended into the dark. I tried a disc behind it, then a little stage ellipse beneath it — both felt off. The answer turned out to be simple: an outline that follows the star’s silhouette, one tone lighter. Placing a slightly larger star behind it created a contour, and the star popped against any background.

It had to be the same star

Here I paused. I was about to make the star rotate, appear, react — wait, doesn’t the assistant star already have all of this?

It does. The assistant’s star is already alive. It sits still, then occasionally nods and tilts; tap it and it bounces; when it senses a completion it spins and bursts with particles. Hand-rolling that again in the gate wasn’t just duplication — it was creating two different stars.

So I pulled that star out into a shared component. Now the gate’s star and the assistant’s star are the same being. Only the size and the optional outline differ; the same gestures, the same personality. The star you meet all over the product being the very same companion every time isn’t just code hygiene (DRY) — it’s what makes the product feel like a single character.

The choreography of arrival

The staging settled like this. First the star arrives with its own motion. A beat later, the bubble unfolds outward from the star’s side — as if the star is handing you a note it’s been holding. On close, the star and the bubble disappear together (the bubble used to vanish first, leaving the star lingering awkwardly).

And I treated the two gates differently. The completion gate is the emotional peak. You did it! In that moment the star spins and sets off a tiny burst — little stars scattering across the screen. An earned celebration. The start gate, by contrast, stays quiet. That one is a gentle invitation, not a reward. The confetti belongs to whoever finished.

Not overdoing it — and one trap

Midway I got greedy. Spin the star 720 degrees on entry, scale it up, throw particles… all at once. Flashy, yes, but it stuttered. And more importantly, the gate is a frequently-firing interrupt. The assistant tab is a destination you visit on purpose, so it can afford to be lavish; the gate is a rite of passage that blocks your flow. Delightful once, irritating by the twentieth time. Novelty animations age fast where they fire often.

So I trimmed it. A double spin became a single one; a busy entrance became one clear motion. Keep the identity (the star hands it to you), but spend the animation budget to fit the moment.

The real culprit behind the stutter was elsewhere. The star’s entry scale ran on React Native’s Animated, while the star’s own gestures ran on Reanimated — two animation systems touching the same view at once. Separating them so they didn’t overlap killed the jank. (Different properties like opacity are fine; but when two systems both drive the same transform, they collide.)

Lessons

• Identity lives in the small moments, not the hero screens. Even a single nudge can be a place where “a companion is beside you” rather than “the system blocks you.” Especially at moments of friction.
• Reusing the same character everywhere makes the product feel like one being. DRY is more than code hygiene; it shapes the product’s texture.
• Match the animation budget to the moment. A destination you visit can be lavish; a frequent interrupt must be restrained.
• Don’t overlap two animation systems on a single view.

The gate still does the same thing — it suggests a step before a hard task, a line after a finished one. What changed is the hand that offers it. Not the system, but the star.

And I’ll admit it — making the star bounce, spin, and scatter little stars across the screen was, the whole way through, simply fun to build. (So was the absurd amount of time I spent drawing one tomato icon. But that’s another story.) If it makes someone crack a smile even once at that moment, that’s enough.