Text Morph
0
Used by 0Controls
Text Morph
Cycle through a word list with a gooey blur-and-scale morph that melts each word smoothly into the next.
KEY FEATURES
- — Cycles through a multi-line or comma-separated word list
- — Gooey SVG threshold filter melts blurred letters together
- — Blur, scale, and fade transition between each word
- — Adjustable morph duration and hold delay via transition control
- — Selectable easing curve mapped to CSS timing functions, including cubic-bezier
- — Custom text color control
- — Extended font controls for family, weight, size, line height, letter spacing, and alignment
- — Semantic tag selection from div, section, h1-h6, or p
- — Longest-word width anchor prevents layout shift during morphs
- — Seamless infinite loop with staggered per-word timing
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
words
string
TEXT\nMORPH
The words to cycle through, one per line or comma separated.
transition
transition
{"..."}
Sets each word's morph duration, hold delay, and easing curve.
font
font
{"..."}
Font family, weight, size, spacing, and alignment of the text.
tag
enum
div
HTML element the text renders as: div, section, h1-h6, or p.
COLORS
PROP
TYPE
DEFAULT
DESCRIPTION
color
color
#FFFFFF
Text color of the morphing words.
