Fluid text transitions powered by Motion. Shared characters slide to their new positions while entering characters fade in and exiting ones fade out.
Included Components
8
Calligraph ContainerShared Character Motion EngineFont Swapping InterpolationDynamic Word CarouselSpring Physics TunerAccessible Live RegionInline & Block Text WrappersUsage
Calligraph brings Apple-grade fluid typography transitions to React applications. Built on top of Motion, it automatically calculates bounding boxes for matching glyphs between words or phrases, animating identical letters directly to their new positions while gracefully fading out removed letters and fading in new ones. It seamlessly supports font weight changes, font-size shifts, variable typography, and provides screen-reader accessible live regions.
