@vladimish/flowtoken-svelte

Svelte 5 port of FlowToken — animate streaming LLM text with CSS animations.

Install

npm install @vladimish/flowtoken-svelte

Quick Start

<script>
  import { AnimatedMarkdown } from '@vladimish/flowtoken-svelte';
  import '@vladimish/flowtoken-svelte/styles.css';

  let text = $state('');

  // Append tokens as they stream in
  // text += newToken;
</script>

<AnimatedMarkdown content={text} animation="fadeIn" />

Components

AnimatedMarkdown

Main component. Renders markdown with per-token animations.

<AnimatedMarkdown
  content={text}
  animation="fadeIn"
  sep="word"
  animationDuration="0.6s"
  animationTimingFunction="ease-in-out"
/>

| Prop | Default | Description | |------|---------|-------------| | content | required | Markdown string to render | | animation | "fadeIn" | Animation name (see list below) | | sep | "diff" | Token split mode: "word", "char", or "diff" | | animationDuration | "1s" | CSS animation duration | | animationTimingFunction | "ease-in-out" | CSS timing function | | imgHeight | "20rem" | Default image height |

AnimatedText

Streaming text with staggered token animations. Useful outside of markdown contexts.

<AnimatedText incomingText={text} animation="blurIn" sep="token" />

SplitText

Low-level tokenizer. Splits text by word, character, or diff and animates each token.

<SplitText input={text} sep="word" animation="fadeIn" animationDuration="0.5s" animationTimingFunction="ease-in-out" />

AnimatedImage

Image that animates on load.

<AnimatedImage src="..." alt="..." animation="fadeIn" animationDuration="1s" animationTimingFunction="ease-in-out" />

DefaultCode / CodeRenderer

Code blocks with syntax highlighting (highlight.js) and per-word animation. Used internally by AnimatedMarkdown but can be used standalone.

<DefaultCode text={code} lang="python" animation="fadeIn" animationDuration="0.6s" animationTimingFunction="ease-in-out" />

Animations

14 built-in animations:

| Name | Effect | |------|--------| | fadeIn | Opacity 0 to 1 | | blurIn | Blur + fade in | | dropIn | Drop from above | | slideUp | Slide up + fade | | slideInFromLeft | Slide from left | | fadeAndScale | Scale up + fade | | bounceIn | Bounce effect | | elastic | Elastic scale | | rotateIn | Rotate in | | wave | Wave up and down | | colorTransition | Red to black | | highlight | Yellow highlight fade | | blurAndSharpen | Blur to sharp | | typewriter | Width expand |

Token Modes

• "diff" (default for AnimatedMarkdown) — Only new tokens animate. Already-rendered tokens stay static. Best for streaming.
• "word" — Split by whitespace. Every token animates on each render.
• "char" — Split by character.

Demo

git clone https://github.com/vladimish/flowtoken-svelte
cd flowtoken-svelte
npm install
npm run dev

Routes:

• / — Landing page
• /text — All 14 animations side by side
• /markdown — Full markdown with controls
• /interactive — Configurable streaming demo

License

ISC