Reactberry

useAnimatedText

Reveal a string character by character, continuing smoothly as streamed text grows.

useAnimatedText returns the part of a string that has been "typed" so far. It animates from the current position to the end of the text with motion. When new text extends the previous text, as with a streamed AI response, it continues from where it was instead of starting again.

Import#

typescript
import { useAnimatedText } from "@reactberry/system";

Usage#

typescript
"use client";

import { useAnimatedText } from "@reactberry/system";
import { Text } from "@reactberry/system/elements";

export default function StreamedReply({ content }: { content: string }) {
  const visible = useAnimatedText(content);
  return <Text as="p">{visible}</Text>;
}

Examples#

Streamed text#

When each new value extends the previous one, the reveal continues from the current position. This example appends a word every 250 ms.

Received 0 of 22 words

Replacing the text#

When the new text does not start with the previous text, the reveal starts again from the beginning. Switch between the two answers to see it.

API#

typescript
function useAnimatedText(text: string): string

Parameters#

PropTypeDefaultDescription
text*
string
—

The full text so far.

Returns#

PropTypeDefaultDescription
visible
string
—

The part of text revealed so far.

Notes#

  • Each animation runs for 4 seconds with an ease-out curve, from the current position to the end of the text, whatever its length. Duration and easing cannot be changed.
  • If the new text does not start with the previous text, the reveal starts again from the beginning.
  • Text is split by character, so multi-character emoji can briefly appear half-rendered.