Write text that draws itself.

Install

Choose the package manager already in your project. No separate publishing step is needed for pnpm, Yarn, or Bun.

npm install glyphed.js
pnpm add glyphed.js
yarn add glyphed.js
bun add glyphed.js

Quick start

write() renders text into an element and animates it when it enters the viewport.

import { write } from "glyphed.js";

write("#hello", "Hello, world!");

API

write(target, text, options?)

One-call DOM rendering and scroll-triggered animation.

renderText(text, options?)

Returns the SVG HTML string without accessing the DOM.

attach(element, options?)

Triggers each rendered word through an IntersectionObserver.

animateWriting(element)

Immediately starts the stroke animation for a word.

Set animate: false for fully drawn, static text. Set once: false when your own render cycle should re-trigger an observer.

React

Render into a ref after mount. Re-render when the text changes.

import { useEffect, useRef } from "react";
import { write } from "glyphed.js";

export function Handwriting({ text }) {
  const ref = useRef(null);

  useEffect(() => {
    write(ref.current, text);
  }, [text]);

  return <span ref={ref} />;
}

SSR

renderText() is pure string output, so it can run during server rendering. Call attach() after hydration when animation is needed.

import { renderText } from "glyphed.js";

const markup = renderText("Server-rendered ink", { animate: false });

Glyphs

Coverage includes lowercase and uppercase English letters, digits, and . , ! ? ' - & ( ) — " ` { } [ ] * = + @ :. Unsupported characters are skipped. To add one, create a glyph module and register it in the glyph lookup.