React

Tegaki’s default export is a React component that supports SSR, streaming text, and imperative playback control.

Installation

npm

npm install tegaki react react-dom

pnpm

pnpm add tegaki react react-dom

bun

bun add tegaki react react-dom

Basic example

import { TegakiRenderer } from 'tegaki';
import bundle from 'tegaki/fonts/caveat';

function App() {
  return (
    <TegakiRenderer
      font={bundle}
      time={{ mode: 'uncontrolled', speed: 1, loop: true }}
      style={{ fontSize: 48 }}
    >
      Hello World
    </TegakiRenderer>
  );
}

Loading...

Controlled time

Drive the animation from external state:

import { useState } from 'react';
import { TegakiRenderer } from 'tegaki';
import bundle from 'tegaki/fonts/caveat';

function App() {
  const [time, setTime] = useState(0);

  return (
    <>
      <input
        type="range"
        min={0}
        max={10}
        step={0.01}
        value={time}
        onChange={(e) => setTime(Number(e.target.value))}
      />
      <TegakiRenderer font={bundle} time={time} style={{ fontSize: 48 }}>
        Scrub me!
      </TegakiRenderer>
    </>
  );
}

Loading...

Drag the slider to scrub through the animation

Imperative handle

Access the engine instance via ref:

import { useRef } from 'react';
import { TegakiRenderer, type TegakiRendererHandle } from 'tegaki';
import bundle from 'tegaki/fonts/caveat';

function App() {
  const ref = useRef<TegakiRendererHandle>(null);

  return (
    <TegakiRenderer
      ref={ref}
      font={bundle}
      time={{ mode: 'uncontrolled', speed: 1 }}
      style={{ fontSize: 48 }}
    >
      Hello World
    </TegakiRenderer>
  );
}

The handle exposes:

• ref.current.engine — the TegakiEngine instance (or null before mount)
• ref.current.element — the container HTMLDivElement

Effects

<TegakiRenderer
  font={bundle}
  time={{ mode: 'uncontrolled', speed: 1, loop: true }}
  effects={{
    glow: { radius: 8, color: '#00ccff' },
    pressureWidth: true,
    gradient: { colors: 'rainbow' },
  }}
  style={{ fontSize: 48 }}
>
  Fancy effects
</TegakiRenderer>

Loading...

Streaming text

Perfect for AI chat interfaces where text arrives incrementally:

function StreamingMessage({ text }) {
  return (
    <TegakiRenderer
      font={bundle}
      time={{ mode: 'uncontrolled', speed: 4, catchUp: 0.5 }}
      style={{ fontSize: 32 }}
    >
      {text}
    </TegakiRenderer>
  );
}

See Streaming Text for more details.