How Does Kotoro Move Around Web Pages?

Web pages were not built for cats to walk across. They are collections of buttons, images, and text boxes whose sizes and positions keep changing. Kotoro interprets that screen as a small stage and uses it as a place to behave naturally.

What this article covers

1. 01How the screen becomes a small physics space
2. 02How behavior states connect to animation
3. 03How Kotoro responds to different page layouts
4. 04How we balance charm with an unobtrusive experience

Treating the screen as a small space

For Kotoro, the browser viewport is a space with coordinates. The next position is calculated from the cat's current location, direction, and speed. In the air, the cat falls downward; at the bottom of the screen, it stops instead of falling forever.

Walking and jumping are layered on top of these basic rules. The result looks less like a fixed image loop and more like a cat responding to its current position and situation.

Tiny motion lab

Use the buttons to see how each state changes the motion.

RestWalkJump

Curling up for a short rest

The small lab above does not reproduce every rule in Kotoro's physics system. It shows the core idea: one behavior state connects position changes with animation.

Every behavior has its own state

If the cat switched randomly from walking to jumping and immediately to sleeping, the result would feel awkward rather than alive. Kotoro therefore manages walking, jumping, resting, grooming, and talking as distinct states.

Each state determines three things together:

1. Which direction the cat moves on the screen
2. Which animation is displayed
3. When the cat transitions to the next behavior

During a conversation, for example, the cat keeps an appearance that fits chatting. While moving, the direction of the animation must match the direction of travel. These small connections make Kotoro feel more like a character than an image attached to the screen.

Web pages never stop changing

Some pages, such as news articles, are very tall. On video services, the player may occupy most of the screen. Scrolling or resizing the window immediately changes the area where the cat can move.

Kotoro does not trust a screen size calculated only once. It checks the visible area and its current position again, then adjusts so it does not disappear completely off-screen. Positions chosen by the user are also stored and carried naturally to the next page.

The most important rule is not getting in the way

More motion is not always cuter. A cat that repeatedly covers an article or stops on an important button quickly becomes inconvenient.

We consider these principles when designing movement:

• Attract attention without interrupting the task
• Let the user control position and size
• Stay quietly occupied when no conversation is needed
• Remain consistent enough for movement to feel predictable

For Kotoro to stay in the browser for a long time, it needs to be a comfortable companion, not simply a character that moves a lot.