The Star Dances

In the last post, the star grows. The more you fill in a task, the richer its surrounding rays become. A quiet acknowledgment of effort.

This time we added motion.

Two Kinds of Motion

There are several ways to bring motion to an icon. It can rotate forever. It can react only on hover. It can spike once on a specific event.

We tried hover first and removed it. A star that only comes alive when the cursor reaches it is fun in that moment, but it leaves the rest of the screen feeling dead. The star’s presence was too thin.

So we split the motion into two distinct things.

• Sparkle — always, gently. Just enough to say “this is alive.”
• Dance — once, right after a task is completed. A short wiggle to mark the moment.

These two express different things. One is “I’m here.” The other is “something just happened.” Both live on the same star, but they don’t fire at the same time.

Sparkle — The Background’s Breath

Sparkle happens even when the screen is still. The point is to keep the screen from feeling like static information.

Tuning the intensity took some iteration. Too strong and it’s distracting; too weak and it’s invisible. We settled on something you barely notice when looking straight at it, but feel slightly when it’s in your peripheral vision. It doesn’t pull attention like an ad. It just signals that the screen isn’t dead.

The phase is offset slightly per star. If every star pulses in unison, it looks like a coordinated chorus, which is unnatural. With each star sparkling on its own beat, the whole screen breathes like a soft, low-volume noise.

Dance — The Moment of an Event

Completion is different. It needs a sense of event.

Tap the checkbox to complete a task and the star next to it does a short wiggle. A small tilt left and right and back. Less than half a second. It ends quickly, but it’s clearly there.

Implementing this required the star component to know “which task was just completed.” Ordinary state isn’t enough. The star can know whether its task is currently completed, but it can’t tell whether it became completed just now.

So we added a small signal of its own. The moment a task is completed, we flip on a “this task was just completed” flag, and turn it off about a second later. During that window, the matching star dances. All other stars carry on sparkling as usual.

The same kind of event signal is useful elsewhere on the screen. Toasts, sounds, automatic focus on the next task — they can all listen to the same event. The star’s dance is just one of many listeners, and the smallest, quietest one.

Why Both

Sparkle alone could have been enough. Dance alone could have been enough. We kept both because they say different things.

Sparkle is state. The star is always there, the task is always alive. Looking at the screen, you can sense that fact, faintly.

Dance is change. Something that was sitting still has had an event happen to it, and the star reacts in that instant. The screen is responding to the user’s action.

State and change are best expressed through different channels in the same interface. Squeeze them into one channel and neither comes through clearly. Color carries identity. Shape carries fidelity. Motion carries state and change. Four kinds of information naturally layered on a single star.

The star carries more meaning than before, but it doesn’t get louder. Each piece of information enters through a different visual property and they don’t compete with each other. Design tends to work when this happens — when adding new information doesn’t make the screen more crowded.