Calligraphy

v1.0.0/GitHub

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

Installation

npm install calligraphy

Usage

import { Calligraphy } from "calligraphy";
import { faker } from '@faker-js/faker';

function App() {
  const text = faker.word.adjective()
  
  function onClick() {
    text = faker.word.adjective();
  }

  return (
    <>
      <Calligraphy>{text}</Calligraphy>
      <button type="button" onClick={onClick}>Shuffle</button>
    </>
  )
}

Best practices

Works best with short strings of similar length. Animate the parent’s width to prevent layout jumps, and use shorter durations for frequent updates, longer ones for deliberate changes.