-
This library uses a single canvas-rendered mask-image, so we can do pixel-level fade-in effects.
- Other libraries can accomplish at most a per-character opacity animation with a HTML soup
- but... it means we have to have a custom algorithm
-
This library also features a super customizable text splitter API. Pick a built-in splitter (character, word, line, sentence) or provide you own function that splits the visually rendered text on screen.
pnpm install react-ai-flow
import { StaggerProvider, StaggeredText } from "react-ai-flow"; function App() { return ( <StaggerProvider splitter="word" duration={500}> <StaggeredText> {/* Fades in text */} Hello World {/* Then fades in the background of the code block */} <StaggeredText> <code> {/* Then fades in each letter inside the code block */} <StaggeredText> Hello world </StaggeredText> </code> </StaggeredText> </StaggeredText> </StaggerProvider> ); }
pnpm install text-stagger
import { Stagger } from "text-stagger"; // Create a stagger orchestrator instance const stagger = new Stagger({ // options to pass }); // Create a text instance const text = stagger.observeText(someDivContainingText, { splitter: 'word', duration: 500, });