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>;

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.