Usage

import { Calligraph } from "calligraph";
import { useState } from "react";

function App() {
  const [text, setText] = useState("Hello");

  return (
    <>
      <Calligraph>{text}</Calligraph>
      <button onClick={() => setText("World")}>Change</button>
    </>
  );
}

When children changes, characters common to both strings slide into their new positions. New characters fade in, removed characters fade out.

Variants

variant="text" diffs the characters and is the default. variant="number" rolls each digit vertically, and variant="slots" spins the digits like a slot machine.

<Calligraph variant="number" animation="snappy">
  {price}
</Calligraph>