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 },
  strokeGradient?: { colors: string | string[], saturation?: number, lightness?: number },
}

style

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

shaper

Type: boolean — default true

Whether this instance uses the globally-registered harfbuzz shaper. Set to false to opt one renderer out of shaping (e.g. side-by-side comparisons) without unregistering the shaper for the whole process. Has no effect when no shaper is registered. See Text Shaping.

onComplete

Type: () => void

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

Static methods

TegakiEngine.registerShaper(factory)

Register a shaper factory globally so every engine instance can shape text. Pass the harfbuzzShaper export from tegaki/shaper-harfbuzz, or pass null to unregister and clear the shaper cache.

import { TegakiEngine } from 'tegaki/core';
import harfbuzzShaper from 'tegaki/shaper-harfbuzz';

TegakiEngine.registerShaper(harfbuzzShaper);

See Text Shaping for the full setup, bundle requirements, and SSR behavior.

TegakiEngine.registerBundle(bundle)

Register a font bundle so it can be referenced by family name (used by the Web Component adapter and any code that wants to pass a bundle name as a string instead of the bundle object).

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);