Fluid text transitions powered by Motion. Shared characters slide to their new positions while entering characters fade in and exiting ones fade out.

npm install calligraph

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.

<Calligraph transition={{ type: "spring", stiffness: 200, damping: 20 }}>
  {text}
</Calligraph>

• React 18+
• Motion 11+

If Calligraph is useful to you or your team, consider sponsoring the project.

• Torph — dependency-free animated text morphing
• NumberFlow — animated number transitions
• NumericText — SwiftUI-style .numericText for the web

• Jace for pushing me to build this
• Inspired by Family