Torph

Dependency-free animated text morphing component for React, Vue, Svelte, and vanilla JavaScript.

Installation

pnpm i torph

Usage

import { TextMorph } from "torph/react";

<TextMorph>Hello world</TextMorph>;

Numbers

Numeric words morph by place value: digits slide along the block axis and the symbols around them travel with the places they belong to. It is on by default, so any value containing a number already animates this way.

import { TextMorph } from "torph/react";

// 1,204 → 1,318 rolls the hundreds and tens, leaves the thousands alone
<TextMorph>{`$${total.toLocaleString("en")}`}</TextMorph>;

For a field somebody is typing in, pass the caret position so the update matches by position rather than by place value:

<TextMorph cursorIndex={caret}>{value}</TextMorph>;

Spring Animations

Use physics-based spring easing by passing spring parameters to ease:

import { TextMorph } from "torph/react";

<TextMorph ease={{ stiffness: 200, damping: 20 }}>Hello world</TextMorph>;

See the package README for full API documentation.

Contributing

Install dependencies

pnpm install:all

Dev/Watch Library and Example

pnpm dev

Build Library

pnpm build

Found this useful?

Follow me on Twitter.

Other projects

You might also like:

• number-flow - Animated number component by Maxwell Barvian.
• easing.dev - Easily create custom easing graphs.

Acknowledgements

• Thanks to Alex for assistance with the site design.
• Thanks to Pugson for putting up with my bullshit.
• Thanks to Benji for coining the Torph name and outlining the method in Family Values.