Story, cursor and loops

Watch the pointer. It travels to the empty assignee, presses, the menu opens from that button, it picks Maya, and the result lands twice: her avatar on the row, a small toast at the bottom. Then everything holds still long enough to read.

An animated demo is a short film the viewer did not ask for. Every move needs a reason, and the whole thing has to survive being watched twice.

Pick the story's shape

What is the product valued for? That decides the shape:

• How it feels to use. The gesture is the story: a cursor does one satisfying thing and the result appears under its hand. The demo above is this kind.
• A flow in an app. A few screens told as one continuous object, the payoff on the last.
• What the system does. The consequence lands somewhere else, and the link is drawn: a value travelling along a line, a card flying into a list. Usually no cursor at all.

And one tie-breaker from Benji Taylor: between a richer story and a calmer, better-framed one, choose the frame.

Beats and the payoff

• 10 to 16 seconds per loop, 3 to 5 beats, building to a payoff. One gesture and one response can be enough.
• Open on a finished screen that works as a still. The first real content is there before the first beat.
• The payoff arrives whole and is visible at the shown size: a panel, a state change, a card coming forward. Never a blank surface for a quarter second.
• The payoff holds about 2 seconds, and nothing sits still for more than 3.

Resets that have a reason

A loop has to get back to the start. A good loop reset has a seen cause (an undo with its keys shown, a Clear button, a panel closing), or it happens while hidden. Data never rewinds in view. A number counting backwards on screen looks like a bug, because it is one.

Also: no product shrinks an app back into its notification. Leave the way the real product leaves.

Two clocks: story and product

Storytelling motion is unhurried. Taylor's kit moves things across the stage on cubic-bezier(0.45, 0, 0.1, 1) and brings new things in over 0.8 to 1 second on cubic-bezier(0.25, 0.8, 0.25, 1).

But the product's own feedback, a button press, a menu opening, keeps the product's real speed, under 300ms. That menu in the demo opens in about 240ms. Only the story slows down; the UI never does.

A cursor that moves like a hand

The cursor is a character. Drag the slider, then move both:

The rules for the pointer, with the numbers from Stageshow's code:

• Travel is timed by distance on a shallow arc: clamp(260 + 0.9 × distance, 300, 650) ms, bowing sideways by up to 24px.
• A press reads: a short pause on arrival, the pointer dips to 0.9 for a moment, and the state changes after the click completes. The pressed control shows its own press.
• It never covers the words it clicks. Aim inside the target, off its text, about 85% across and 60% down.
• It rests on empty surface near its next move, never parked on a control, and fades after about 4 seconds still.
• Its shape comes from what it crosses: an I-beam over text, a hand on a link, an open hand over something draggable. That is the cursor kind, and it switches as the pointer crosses the edge, not after it arrives.

Drags, selections and phones

A drag is one motion: the thing follows the pointer the whole way. The grab offset, where the hand took hold, stays fixed through travel and drop. A carried card lifts slightly (scale 1.03, a deeper shadow, a degree of tilt) and lands flat.

A text selection reads left to right from a word boundary and stays under the I-beam on every frame. Nothing scrolls unless the pointer is over it. And the camera pushes in only when the payoff would be too small to read, once per story.

On a phone there is no arrow cursor. A touch dot appears only where the finger taps or drags. A swipe is a flick: a third of the screen in about a quarter second. A notification is tapped to open its app, the way people actually use phones.

Script this faux UI as an animated demo:
- Story shape: how it feels to use. One gesture: assign the selected conversation to Maya.
- 4 beats: travel to the assignee, press, pick Maya from the menu, result lands (avatar on the row + a toast). Payoff holds 2s.
- Set the poster frame first: the assigned state with the toast visible.
- Cursor travel clamp(260 + 0.9 × distance, 300, 650)ms on a shallow arc; aim off the label (85% across, 60% down); rest on empty surface.
- The menu opens at product speed (~240ms) from its trigger; story motion may be slower.
- play once with a Replay button, or loop with a visible cause for the reset and a pause button if it runs over 5s.