# Story, cursor and loops

> Script an animated product demo with three to five beats, a cursor that moves like a hand, a poster frame that works alone, and a loop that resets for a reason.

Module: Product demos · Level: intermediate · 8 min · https://school.agents.org.in/media/faux-ui/story-and-cursor

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.

*[Interactive demo: Four beats and a payoff that holds. Replay is the reset, so it has a cause.]*

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 (The result an animated demo builds to: the panel that opens, the state that changes. It arrives whole, stays visible at the shown size and holds for about 2 seconds). 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.

> **The frame most people see.** The poster frame (The frame shown before a video plays, as its thumbnail. Some films bake 1 to 4 frames of the finished title at the very start so the thumbnail names the product) is the one still shown in a thumbnail, a screenshot, or to anyone who has reduced motion turned on. Set it first, to the beat that tells the story on its own, with the result left on screen. Never a frame caught mid-change.

## Resets that have a reason

A loop has to get back to the start. A good loop reset (How an animated demo gets back to its start. A good reset has a visible cause (undo, close, clear) or happens out of sight; data never rewinds in view) 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.

| Motion in the kit | Value |
|---|---|
| A card flying to its slot | 750ms on a soft arc, no bounce on landing |
| A new row opening | height over 0.42s, content fading in with it |
| A popover | scales over 0.24s from the side nearest its trigger |
| A stagger within a scene | 40 to 80ms apart, in reading order |

## A cursor that moves like a hand

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

*[Interactive demo: Short hops are quick, long trips don't drag. A fixed duration makes every hop crawl.]*

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 (The shape of the pointer: arrow, I-beam over text, hand on a link, open hand over something draggable. In a demo it switches as the pointer crosses an element's edge), and it switches as the pointer crosses the edge, not after it arrives.

*(A cursor parked on the button it just pressed hides the one thing the beat is about. Move it off as soon as the press lands.)*

## 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 of something it drags. It stays the same through the whole drag and the drop, so the object does not jump to center itself under the pointer), 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 a product demo (paste into your agent):**

```text
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.
```

**Check yourself:** Your demo loops every 12 seconds. At the end, the revenue number on screen counts back down from $4,210 to $3,980 so the next loop can count up again. What should change?

- [ ] Slow the count-down so it looks deliberate
- [x] Snap the number back while it is hidden or under a closed panel, or bring the next loop in as new data
- [ ] Remove the number from the demo
- [ ] Count down faster so nobody notices

*Why:* Data never rewinds in view. A reset needs a visible cause or must happen out of sight.

## In the skill

- https://school.agents.org.in/skill/faux-ui/demo-story-and-loops.md
- https://school.agents.org.in/skill/faux-ui/demo-cursor-and-touch.md