Streaming Text Reveal
Words arrive one at a time behind a soft caret — the answer is being written, not loaded.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { Fragment, useEffect, useRef, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Streaming Text Reveal
*
* Words arriving one at a time, the way a model streams them, with a
* soft caret parked at the write head.About this pattern
The default shape of a generated answer: text lands word by word while a caret marks the write head. Streaming converts dead waiting time into readable progress — the first sentence can be read while the rest is still arriving, which makes a four-second response feel shorter than a one-second spinner. Words fade into place and never scale, because deformed glyphs are the fastest way to make text look cheap.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- AI assistant
Responses render progressively as the model streams them.
Related patterns
- AI Result RevealThe result card rises into place while its confidence value counts up to the final number.
- Streaming Code BlockGenerated code arrives line by line while the panel grows downward to fit it.
- Stop Generation CutHalting a stream folds the caret away, closes the partial answer with a hairline, and states that it stopped.