Now with React Server Components support
Processing Transaction...
Payment Complete

A zero-dependency, highly customizable text morphing component. Create buttery-smooth transitions between text states with physical spring animations and organic blur effects.

Designed for perfection

Everything you need to create stunning text animations.

Fluid Blur Transitions

Utilizing native SVG filters and CSS compositing for organic, liquid-like crossfades that never look harsh.

Zero Dependencies

Under 4kb gzipped. No external physics libraries or animation frameworks required.

Spring Physics

Built-in spring solvers ensure natural settling and continuous velocity.

Character Staggering

Control the delay between individual character animations for cascading reveal effects.

A
B
C
D

Interactive Playground

Tweak parameters and generate code instantly.

800ms
12px
30ms
Dynamic Island
Processing
Complete
800ms
Smooth Spring
Processing
1200ms
Linear Fade
Processing
600ms
Processing Transaction
Payment Complete
import { FluxMorph } from 'fluxmorph';

const el = document.getElementById('my-text');
const instance = FluxMorph.create(el, {
  preset: 'apple-dynamic-island',
  duration: 800,
  blur: 12,
  stagger: 30
});

await instance.to('Payment Complete');

Get Started

npm install fluxmorph