Text Morph

Watch words transform into one another through Fourier series.

Live demo

Type any text, emoji, or CJK characters and see them morph in real time. Add multiple stops to create chained transitions with optional pauses between them.

• Fourier morphing - decomposes text outlines into complex Fourier coefficients and smoothly interpolates between them
• Multi-stop transitions - chain multiple words with arrows; add pauses between steps
• Rendering styles - Classic line drawing or GPU-accelerated particle sand
• Emoji & CJK support - works with any Unicode text your browser can render
• Themes - 11 built-in color themes (dark and light), with automatic system preference detection
• Share & export - copy a shareable URL or record a video of the animation
• Custom fonts - pick from system fonts or Google Fonts

1. Each text string is rasterized to a bitmap and its outlines are traced as closed contours
2. Contours are sampled and decomposed into complex Fourier coefficients via DFT
3. Source and destination contours are matched using the Hungarian algorithm (minimizing centroid distance, area, and extent differences)
4. During playback the coefficients are interpolated with cosine easing and reconstructed back into curves
5. The sand renderer pushes Fourier reconstruction into a WebGL vertex shader for ~90K+ particles at 60 fps

npm install
npm run dev      # start dev server
npm run build    # production build → dist/

MIT