Calligraph

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

Install

npm install calligraph

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.

Custom transitions

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

Requirements

• React 18+
• Motion 11+

Sponsors

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

See also

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

Acknowledgments

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