Calligraph

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.

Words

Installation

npm install calligraph

Usage

import { Calligraph } from "calligraph";
import { faker } from '@faker-js/faker';

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

  return (
    <>
      <Calligraph>{text}</Calligraph>
      <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.