Svelte

A reactive statement keeps the animation in sync with the state prop.

Export from Ship

Pick Svelte on the Ship screen and download the component. It inlines the frames, and a reactive statement restarts playback whenever state changes.

<Equalizer state={status} />

Use the package

Svelte renders custom elements as they are. Ship's package option writes a component around the flickering-dots element with your set embedded. To use it yourself, register the element once the component mounts.

<script lang="ts">
  import { onMount } from 'svelte';
  import { defineDotsElement } from 'flickering-dots/element';

  export let status = 'thinking';
  onMount(() => defineDotsElement());
</script>

<flickering-dots set="equalizer" state={status} size="28"></flickering-dots>