Most product tours take over the screen. The best ones just point. — Frigade

LoginAssistantManage your AI assistantEngageBuild onboarding flows

Get Started

Products<br>Assistant<br>Engage<br>Company<br>How It Works<br>Pricing<br>Updates<br>Blog<br>About

LoginGet Started

← All writing<br>Most product tours take over the screen. The best ones just point.<br>Most product tours take over your screen by dimming it and stacking modals on top. The best ones don't get in the way. They point at the real element and leave, and the same restraint runs through every animation we ship.<br>Elton Lai-Rego, Senior Engineer<br>·June 29, 2026·9 min read

Open a product for the first time and the tour finds you. The screen dims, a card lands in the middle of it, an arrow bounces at a button you were not looking at, and a little dot says there are six more of these to go. Pendo, Appcues, and Userpilot all ship a version of it. The motion is meant to read as guidance. It reads as being walked somewhere you did not ask to go.

I have built plenty of that kind of guidance over the years, and almost none of it survived contact with real users. Eight years of building UI has beaten one lesson into me: motion that performs guidance gets in the way, and motion that points at the real thing gets out of it. The good version does one job and leaves.

That is the bar we hold every animation to at Frigade. It has to explain a change the user would otherwise miss, or point them at the one thing that matters right now. Anything that does neither is noise wearing a nice easing curve, and we delete it. What follows is the handful of principles that came out of getting this wrong first, starting with how we point and then how we animate.

Point, don't trap

your product

Connect data

Invite your team

Frigade's ping pulses on the real element, scaling up and fading to zero over 2s on an ease-out curve. When a flow has more than one stop, the same beacon flies to the next element on an ease-out-cubic takeoff and a sine-eased landing, where a tour would just advance to the next modal.<br>The opposite of a coachmark is a ping. It is a dot with a ring that pulses outward and fades, sitting right on the element that matters: two seconds per pulse, scaling up and dropping to zero opacity on an ease-out curve, fading in over 200ms when it first appears. It does not dim the screen or block your click. You can act on it or ignore it, and either way you stay in control of the product.

A coachmark spotlights one thing by darkening everything else. A ping does the reverse, brightening one thing and leaving the rest of the product exactly as it was. The hint that anchors it wraps the real button rather than a screenshot of one, and the ping rides 12px off the edge so the target underneath stays legible.

When guidance needs more than one stop, the ping flies. Instead of advancing a modal from step one of six, a single beacon travels to the next real element along a curved path, accelerating off the mark on an ease-out-cubic takeoff and settling in with a sine-eased landing and a small vibration as it arrives. The guidance moves through the live product, not over a dimmed picture of it.

That is also why it holds up. A long authored sequence is written against the product as it looked the day someone built it, and it drifts the moment the next release ships. A ping points at whatever is actually on the screen now. There is no sequence to drift.

The ping is the clearest case, but the same restraint runs through every animation we ship, including the ones inside the assistant.

Animate a real process, never fake one

Each word fades up from a 4px lift with a 4px blur clearing to zero, 250ms on cubic-bezier(0.22, 1, 0.36, 1), a new word every 75ms. The cadence reads as the assistant composing in real time instead of pasting a finished block.

The reveal gets mistaken for decoration. Its job is to expose a real process, not perform a fake one. Every answer streams to the user token by token, the moment the model produces each one. We do not wait for the full completion to come back before we start painting it. That is most of why the assistant feels quick: the time to the first word is close to instant, where a product that buffers the whole response leaves you staring at a blank space until the last token lands. Plenty of assistants still work that way.

Streaming raw tokens is not a free win, though. They arrive in uneven bursts, words snap into place, and half-parsed markdown reflows as the rest catches up. The easy fix is to hold the answer until it is finished and drop it in clean, which throws away the speed we just bought. The reveal is how we keep both. Each word animates in the instant it arrives, so the stream reads as the assistant composing in real time instead of a cursor twitching through tokens. The speed stays real, and the experience stays calm.

A finished block of text dropped in all at once tells you nothing about where it came from. Watching it resolve word by word tells...