Goker Logo Animation — Idle & Loader Modes That Keep It Alive

In the first version (goker logo), I treated the G and O letters as a face, then placed the two dots of the Ö character as pupils - turning the logo into a simple but expressive interactive mark. The eyes track the mouse position, the expression shifts nicely with movement, and I also added a small hover interaction for extra personality.

That behavior works great when the user is moving the mouse, but in loader or idle states the character staying completely still feels a bit off. So the next step was making sure the animation keeps flowing even when there’s no interaction.

The Goal: A Living Animation Without User Input

Because the expression is driven by the mouse, the default behavior becomes:
no movement → no expression → no life.

What I wanted instead:

• Start with a self-running animation in loader state

• Let the user interrupt instantly with mouse movement

• When the mouse stops, wait for an idle delay, then smoothly fall back to an autonomous animation loop

The Approach: Record Mouse Data → Replay It in a Loop

To achieve that, I built a small record/replay flow:

1. Sample the mouse position at a fixed interval

2. Store those samples as a sequence

3. Replay the sequence as a timeline (loop)

This immediately created a new challenge: if the logo’s placement changes between recording and playback, the same raw coordinates can produce a different response. So I needed the recorded data to survive layout changes.

Key Step: Converting Positions into an “Absolute” Representation

Instead of saving raw pixel coordinates, I converted the recorded mouse positions into a more “absolute” form with a simple method—so the same motion pattern stays meaningful even if the animation’s placement or scale changes.

In practice:

• Convert positions into a normalized representation during recording

• Map them back into the current layout during playback

• Preserve the character feel across different contexts and placements

And just like that, I ended up with a lightweight animation system that can render mouse-driven motion anywhere.

A Third Signal: Hover State as Binary Data

Since I already had hover actions, a third data channel naturally joined the recording:

• Hover state stored as a binary signal (on/off)

So now the playback can reproduce not just eye motion, but also the subtle hover-driven reactions in a controlled way.

Idle Delay: When the User Stops, the Animation Continues

To properly detect idle state, I added a delay parameter:

• When the mouse stops moving, a timer starts

• After a short delay, the system considers it “idle”

• Playback takes over and keeps the animation alive

This removes the “frozen mascot” feeling, while still letting the user regain control instantly.

Loader Mode: Animate First, Interrupt with Mouse, Continue Interactive

The loader behavior becomes clean with the same mechanism:

• Playback starts immediately on load (the logo is alive from frame one)

• Mouse movement interrupts playback

• The system transitions into interactive tracking seamlessly

That small shift makes the logo feel much more like a character than a static element.

Result

With these additions, the logo is no longer just a “mouse-following effect.” It now maintains its character across idle, loader, and fully interactive states—portable, reusable, and consistently expressive.

I’m not sharing the code this time, since the core logic is already covered here. Visuals are attached.

If you need help implementing a similar improvement, feel free to get in touch.