SolidJS

Tegaki provides a SolidJS component with SSR support and fine-grained reactive updates.

Installation

npm

npm install tegaki solid-js

pnpm

pnpm add tegaki solid-js

bun

bun add tegaki solid-js

Basic example

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

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

Controlled time

Use a signal to drive the animation:

import { createSignal } from 'solid-js';
import { TegakiRenderer } from 'tegaki/solid';
import bundle from 'tegaki/fonts/caveat';

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

  return (
    <>
      <input
        type="range"
        min={0}
        max={10}
        step={0.01}
        value={time()}
        onInput={(e) => setTime(Number(e.currentTarget.value))}
      />
      <TegakiRenderer
        font={bundle}
        text="Scrub me!"
        time={time()}
        style={{ 'font-size': '48px' }}
      />
    </>
  );
}

Effects

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

Streaming text

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

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

Ref handle

Access the engine via a callback ref:

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

function App() {
  let handle: TegakiRendererHandle;

  return (
    <TegakiRenderer
      ref={(h) => (handle = h)}
      font={bundle}
      text="Hello World"
      time={{ mode: 'uncontrolled', speed: 1 }}
      style={{ 'font-size': '48px' }}
    />
  );
}

The handle exposes:

• handle.engine — the TegakiEngine instance
• handle.element — the container HTMLDivElement

Props

The SolidJS component accepts all TegakiEngineOptions plus standard HTML div attributes (class, style, etc.).