@glyphflow/core

Zero-dependency, per-character text animation engine using the Web Animations API.

See the main README for full documentation.

Install

npm install @glyphflow/core

Usage

import { GlyphFlow } from "@glyphflow/core";

const gf = new GlyphFlow({
  container: document.getElementById("my-text"),
  text: "Hello!",
  // Optional: use a preset
  enter: "blur-fade-slide",
  exit: "blur-fade-slide",
  // Optional: split by word or line instead of char
  splitMode: "char",
});

// Swap text with animated transition
gf.setText("New text!");

// Clean up
gf.destroy();

API

new GlyphFlow(options)

| Option | Type | Default | Description | |---|---|---|---| | container | HTMLElement | - | Target element (required) | | text | string | "" | Initial text | | splitMode | "char" \| "word" \| "line" | "char" | Granularity | | enter | Partial<PhaseConfig> \| string | "blur-fade-slide" | Enter animation | | exit | Partial<PhaseConfig> \| string | "blur-fade-slide" | Exit animation | | wrapPadding | number | 8 | Padding for text wrapping | | overlap | boolean | false | Allow enter/exit overlap | | reducedMotion | "instant" \| "skip" \| "ignore" | "instant" | Reduced motion handling |

Methods

• setText(text: string) - Update displayed text with animation.
• destroy() - Clean up DOM and observers.

License

MIT