Streaming Text

Tegaki can animate text as it arrives from a streaming API, making it perfect for AI chat interfaces.

Approach

Use uncontrolled mode — it automatically tracks the growing text and animates new characters as they arrive. The catchUp option gently speeds up playback when there’s buffered text, so the animation stays close to the stream without jumping.

React

import { TegakiRenderer } from 'tegaki';

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

Svelte

<script>
  import { TegakiRenderer } from 'tegaki/svelte';
  let { text, font } = $props();
</script>

<TegakiRenderer
  {font}
  {text}
  time={{ mode: 'uncontrolled', speed: 4, catchUp: 0.5 }}
/>

Vue

<script setup>
import { TegakiRenderer } from 'tegaki/vue';
const props = defineProps<{ text: string; font: any }>();
</script>

<template>
  <TegakiRenderer
    :font="props.font"
    :text="props.text"
    :time="{ mode: 'uncontrolled', speed: 4, catchUp: 0.5 }"
  />
</template>

Vanilla JS

import { TegakiEngine } from 'tegaki/core';

const engine = new TegakiEngine(container, {
  font: bundle,
  time: { mode: 'uncontrolled', speed: 4, catchUp: 0.5 },
});

// As chunks arrive:
engine.update({ text: accumulatedText });

Update text as chunks arrive from your API — Tegaki handles the rest.

Tuning

• speed — base playback speed multiplier (default 1). Higher values write faster.
• catchUp — how aggressively the animation speeds up to close the gap when text arrives faster than it can be drawn. 0 disables catch-up (default). Typical range: 0.2 – 2.

Live demo

See the chat demo on the homepage for an example of streaming handwriting animation.