StreamingText

Guidelines#

What you provide: each word in its own span.t-stream-w; add is-in as it arrives. Tokens: --stream-fade 350ms, --stream-gap 60ms between words, --stream-blur 1px, --stream-ease cubic-bezier(0.22, 1, 0.36, 1). Under reduced motion words appear at once.

Use it for agent replies as they stream; set the prose in chat-message (14.5px / 1.68). Keep changing text in its own element so browser translation doesn't break it.

Facts#

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
var TEXT = "I found 14 CFOs who started a new role since July. Want me to draft an opener for each and hold them for your review?";
function App() {
  var words = TEXT.split(" ");
  var s = React.useState(0), n = s[0];
  React.useEffect(function () {
    if (n >= words.length) { var r = setTimeout(function () { s[1](0); }, 2200); return function () { clearTimeout(r); }; }
    var t = setTimeout(function () { s[1](n + 1); }, 60); return function () { clearTimeout(t); };
  }, [n]);
  return h("p", { className: "max-w-xl text-[14.5px] leading-[1.68]" }, words.map(function (w, i) {
    return h("span", { key: i, className: "t-stream-w" + (i < n ? " is-in" : "") }, w + " ");
  }));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Motion#