Svelte

Tegaki provides a Svelte 5 component with SSR support and reactive prop updates.

Installation

npm

npm install tegaki svelte

pnpm

pnpm add tegaki svelte

bun

bun add tegaki svelte

Basic example

<script>
  import { TegakiRenderer } from 'tegaki/svelte';
  import bundle from 'tegaki/fonts/caveat';
</script>

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

Controlled time

Bind the time to a reactive variable:

<script>
  import { TegakiRenderer } from 'tegaki/svelte';
  import bundle from 'tegaki/fonts/caveat';

  let time = $state(0);
</script>

<input type="range" min={0} max={10} step={0.01} bind:value={time} />

<TegakiRenderer
  font={bundle}
  text="Scrub me!"
  time={time}
  style="font-size: 48px"
/>

Effects

<script>
  import { TegakiRenderer } from 'tegaki/svelte';
  import bundle from 'tegaki/fonts/caveat';
</script>

<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

<script>
  import { TegakiRenderer } from 'tegaki/svelte';
  import bundle from 'tegaki/fonts/caveat';

  let { text } = $props();
</script>

<TegakiRenderer
  font={bundle}
  {text}
  time={{ mode: 'uncontrolled', speed: 4, catchUp: 0.5 }}
  style="font-size: 32px"
/>

Props

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