Scripted chat demo

Use it for

• A hero that shows the product doing its job
• Explaining a flow that happens over messages

Avoid

• Playing it faster than people can read
• Pretending it is live data: label it as an example

How it works

Every item has a script time in data-t. A segment table stretches the time before human lines by 2.5 so they play slower than system steps, then a single setTimeout chain maps wall clock to script time and toggles an on class on every item whose time has passed, sleeping until the next item is due. An item first opens its space with max-height and margin, then rises out of a light blur. The loop restarts after the last item and stops off screen.

Accessibility

The thread is one image with a text summary, so screen readers hear the story once instead of a stream of changes, and a visible caption says it is illustrative. Reduced motion shows the whole thread at once.