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

yarn

yarn 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' }}
      />
    </>
  );
}

Plugins

Glows, gradients, tapered ends and the rest are plugins. Import the factories from tegaki/solid and pass the plugins in a list:

import { glowPlugin, strokeGradientPlugin, TegakiRenderer } from 'tegaki/solid';

const plugins = [strokeGradientPlugin(), glowPlugin({ radius: 0.1, color: '#00ccff' })];

<TegakiRenderer
  font={bundle}
  text="Glowing rainbow"
  time={{ mode: 'uncontrolled', speed: 1, loop: true }}
  plugins={plugins}
  style={{ 'font-size': '48px' }}
/>

Registered plugins can also be named: plugins={['taper', ['glow', { radius: 0.1 }]]}. See Style plugins and Naming plugins. The pressure prop (0 to 1, default 1) sets how much the ink’s width follows the pen’s pressure.

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