TegakiRenderer

The renderer component is available for every supported framework. See the framework guides for import paths.

Import

import { TegakiRenderer } from 'tegaki';        // React
import { TegakiRenderer } from 'tegaki/svelte';  // Svelte
import { TegakiRenderer } from 'tegaki/vue';     // Vue
import { TegakiRenderer } from 'tegaki/solid';   // SolidJS
import { TegakiRenderer } from 'tegaki/astro';   // Astro
import { TegakiEngine } from 'tegaki/core';       // Vanilla JS

Props

font

Type: TegakiBundle — Required

The font bundle containing glyph components, metrics, and timing data.

children / text

Type: string

The text to render. Can be passed as children or the text prop.

time

Type: number | TimeControlProp

Controls animation timing. Pass a number for controlled mode, or an object:

// Uncontrolled — component manages its own clock
{ mode: 'uncontrolled', speed?: number, loop?: boolean }

// CSS — animation driven by CSS transitions
{ mode: 'css', speed?: number }

effects

Type: TegakiEffectConfigs

Effects configuration:

{
  glow?: { radius: number, color: string, offsetX?: number, offsetY?: number },
  wobble?: { amplitude: number, frequency: number, mode?: 'sine' | 'noise' },
  pressureWidth?: { strength: number },
  taper?: { startLength: number, endLength: number },
  gradient?: { colors: string | string[], saturation?: number, lightness?: number },
}

style

Style object or string applied to the container. Use fontSize to control the text size.

onComplete

Type: () => void

Callback fired when the animation reaches the end (uncontrolled mode only).

Helper functions

computeTimeline(text, font)

Computes the total animation duration for a given text and font bundle. Useful for controlled time mode.

import { computeTimeline } from 'tegaki';

const { totalDuration } = computeTimeline('Hello', bundle);