https://github.com/samdenty/react-ai-flow

Silky smooth React AI chatbot primitives
https://github.com/samdenty/react-ai-flow

Last synced: 6 months ago
JSON representation

Silky smooth React AI chatbot primitives

• Host: GitHub
• URL: https://github.com/samdenty/react-ai-flow
• Owner: samdenty
• Created: 2024-12-21T14:30:41.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-27T13:13:06.000Z (9 months ago)
• Last Synced: 2025-07-12T08:44:26.103Z (6 months ago)
• Language: TypeScript
• Homepage: https://react-ai-flow.com/
• Size: 14.6 MB
• Stars: 98
• Watchers: 6
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![Demo](https://raw.githubusercontent.com/samdenty/react-ai-flow/refs/heads/main/assets/demo.gif)](https://react-ai-flow.com/)

# What sets this library apart?

- 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.

# Usage

## React

```bash

pnpm install react-ai-flow

```

```tsx

import { StaggerProvider, StaggeredText } from "react-ai-flow";

function App() {

  return (

    

      

        {/* Fades in text */}

        Hello World

        {/* Then fades in the background of the code block */}

        

          

            {/* Then fades in each letter inside the code block */}

            

              Hello world

            

          

        

      

    

  );

}

```

## Plain JS DOM API

```bash

pnpm install text-stagger

```

```ts

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,

});

```