Calligraph
calligraph.raphaelsalaja.com- Category
- Developer Tools
- Rank
- No. 2835Tools index
Previous survey · No. 2757 ·
- Pricing
- Open Source
- Type
- TOOL
- Use case
- Design & Media
- Interfaces
- Web · SDK
- Builder
- raphaelsalaja
- GitHub
- 448 stars
- Date
About
A React library that creates smooth, fluid text and number transitions with elegant animations. Perfect for creating dynamic text effects in web applications without complex animation code.
What it does
Calligraph is a single React component that animates a string when it changes. It compares the old and new text, keeps the characters they share and moves them to their new spots, while added characters blur and scale in and removed ones blur out. Two more modes handle figures: one rolls each digit vertically in the direction the value moved, the other spins every digit column like a slot machine. It sits on top of the Motion animation library and needs React 18 or newer plus Motion 11 or newer.
Why it's ranked here
The core idea is implemented with care rather than faked. Matching uses a proper longest common subsequence over grapheme clusters, so emoji and combined characters count as one unit, and the spread of entering characters scales with how much of the string actually changed. The number modes read the sign of the change to pick a roll direction and keep a leading currency prefix still. It is MIT licensed, ships as an ES module with type declarations and no side effects, and CI lints, typechecks and builds every pull request. The scope is small, which is the point.
What's good
One component, three behaviours, chosen by a single option: text diffing, rolling digits, or slot columns. Spring presets named smooth, snappy and bouncy save you from tuning physics by hand. The wrapper animates its own width to match the new content by default, so neighbouring layout does not jump when a word gets longer. Direction and drift options let entering text arrive from below or above, and a completion callback fires when the last character settles. The component passes other props through to the wrapper element and can render as any element type.
Tradeoffs
The README shows a custom spring passed straight to the component, but the component's declared options only accept a named preset, so that example does not match the typed API. The per-character delay option is accepted in text mode but never applied there, and the slot mode ignores the completion callback. Every animated character is marked hidden from assistive technology, and the files read add no replacement label, so screen reader users may hear nothing unless you supply one. The CI runs lint, typecheck and build but no test step. Matching cost grows with the product of both string lengths.
How to use it well
Reach for it on short, changing labels: a rotating headline word, a status chip, a price or counter that ticks. Use the number mode for values that go up and down and the slot mode when you want a showier spin. Add your own accessible label on the wrapper, since the letters themselves are hidden from screen readers. Pick a preset rather than relying on the README's custom spring example. It is not a general text effects kit or a paragraph animator; the README itself points to alternatives such as a dependency-free text morpher and a dedicated number transition library.
Technical notes+
packages/calligraph/src/index.tsx switches between TextRenderer, NumberRenderer and SlotsRenderer on the variant prop and wraps output in an AutoSizeWrapper that tracks width with a ResizeObserver; CalligraphProps has no transition field, only an animation preset key. packages/calligraph/src/reconcile.ts builds a full dp table for computeLCS and derives changeRatio for drift; reconcileDigitKeys right-aligns digit bodies and takes direction from Math.sign of the parsed values. packages/calligraph/src/text.tsx destructures no stagger and sets aria-hidden on each span. packages/calligraph/src/slots.tsx masks columns with a linear gradient and never calls onComplete. packages/calligraph/package.json declares motion, react and react-dom as peers and builds with bunchee.
Observed
- License
- MIT
- Language
- TypeScript (React components)
- Install
- npm package, ES module with bundled type declarations
- Peer dependencies
- React 18+, React DOM 18+, Motion 11+
- Interface
- Single React component with text, number and slots variants
- CI
- Lint, typecheck and build on pull requests; no test step
- Repository layout
- pnpm monorepo managed with Turborepo and Changesets
Read from README.md, package.json, LICENSE, packages/calligraph/package.json, packages/calligraph/README.md, packages/calligraph/src/index.tsx, packages/calligraph/src/text.tsx, packages/calligraph/src/number.tsx, packages/calligraph/src/reconcile.ts, packages/calligraph/src/slots.tsx, .github/workflows/ci.yml.
What it can do
Create smooth text transitions between different strings
Text strings and transition parameters → Animated text transition effects
Generate fluid number transitions with animations
Numerical values and animation settings → Animated number counting effects
Render dynamic text effects in React applications
React component props and text content → Animated text components
Apply elegant animations to text without custom animation code
Text content and predefined animation types → Pre-built animated text effects
Import and integrate text animation components via npm
npm install command and import statements → Ready-to-use React animation components
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.