---
title: "Recreating Stream Text Animation Hook"
url: "https://sanyam.sh/blogs/recreating-stream-text-animation-hook"
date: "2024-12-15"
readTime: "5 min read"
description: "re-creating the popular one-liner hook to add text reveal animation to streams of incoming strings from external LLM sources or backend API responses."
---
# Recreating Stream Text Animation Hook
I recently re-created the popular one-liner hook to add a text reveal animation to streams of incoming strings, which could come from an external LLM source or a backend API response.
## Live Demo
_An interactive demo runs here on the page._
## The Hook: useAnimatedText
The _useAnimatedText_ hook takes a string as input and returns an animated version of that string.
The core idea is straightforward: we slice the incoming text stream from **0** to the current **cursor** (which we'll increment with framer-motion).
We set the _delimiter_ to either _" "_ (for word-by-word animation) or _""_ (for letter-by-letter animation) to split the text accordingly.
To make this happen, we'll use _animate()_ to drive the animation from the starting value up to the text length, and you can experiment with various _animate()_ attributes to customize the effect.
```typescript
import { animate, useMotionValue } from "framer-motion";
import { useEffect, useState } from "react";
let delimiter = " "; // or "" for letter/letter
function useAnimatedText(text: string) {
const [cursor, setCursor] = useState(0);
useEffect(() => {
let controls = animate(0, text.split(delimiter).length, {
duration: 5,
ease: "easeOut",
onUpdate(latest) {
setCursor(Math.floor(latest));
},
});
return () => controls.stop(); // cleanup. similar to clearTimeout()
}, [text.length]);
return text.split(delimiter).slice(0, cursor).join(delimiter);
}
```
As the _cursor_ updates, the text reveal animation progresses in real-time.
To efficiently track the current cursor position, we use framer's motion value. This approach ensures that even if the text stream pauses or the hook re-renders, the motion value will preserve the last cursor position, keeping the animation seamless.
```typescript
import { animate, useMotionValue } from "framer-motion";
import { useEffect, useState } from "react";
let delimiter = " "; // or "" for letter/letter
function useAnimatedText(text: string) {
const animatedCursor = useMotionValue(0);
const [cursor, setCursor] = useState(0);
useEffect(() => {
let controls = animate(animatedCursor, text.split(delimiter).length, {
duration: 5,
ease: "easeOut",
onUpdate(latest) {
setCursor(Math.floor(latest));
},
});
return () => controls.stop();
}, [animatedCursor, text.length]);
return text.split(delimiter).slice(0, cursor).join(delimiter);
}
```
If the text response is reset, whether from a client-side action or a change in the text stream source, the current motion value should jump to **0** to properly reset the UI for the reveal of the new text stream.
To handle this, we keep track of the previous text and check if the new text is a continuation of the old one. This allows us to detect resets and adjust the cursor position accordingly.
```typescript
import { animate, useMotionValue } from "framer-motion";
import { useEffect, useState } from "react";
let delimiter = " ";
function useAnimatedText(text: string) {
const animatedCursor = useMotionValue(0);
const [cursor, setCursor] = useState(0);
const [prevText, setPrevText] = useState(text);
const [isSameText, setIsSameText] = useState(true);
if (prevText !== text) {
setPrevText(text);
setIsSameText(text.startsWith(prevText));
if (!text.startsWith(prevText)) {
setCursor(0);
}
}
useEffect(() => {
if (!isSameText) {
animatedCursor.jump(0);
}
let controls = animate(animatedCursor, text.split(delimiter).length, {
duration: 5,
ease: "easeOut",
onUpdate(latest) {
setCursor(Math.floor(latest));
},
});
return () => controls.stop();
}, [animatedCursor, isSameText, text.length]);
return text.split(delimiter).slice(0, cursor).join(delimiter);
}
```
If the text changes, we update our state accordingly.
## Using the Hook in a Component
To demonstrate how to use this hook, I've created a simple component that compares the regular text display with the animated text display. Here's the component:
```tsx
"use client";
import { useState, useEffect, useRef } from "react";
import { animate, useMotionValue } from "framer-motion";
import { Button } from "@/components/ui/button";
const delay = 300;
const characters = 20;
export default function AnimatedTextDemo() {
const [isPlaying, setIsPlaying] = useState(false);
const [text, setText] = useState("hello world");
const animatedText = useAnimatedText(text);
useInterval(
() => {
let newText = getNextChars(characters);
setText((text) => text + newText);
},
isPlaying ? delay : null
);
return (