TypeMorphix is a premium Framer component that morphs rotating text through a gooey liquid transition, built so every word or phrase can carry its own font and its own color.
Where a typical text morph component locks your rotation to one typeface and one color, TypeMorphix lets each word switch font, size, alignment, and color independently.
WHAT IT DOES Add unlimited words or phrases to a rotating sequence. Each one morphs into the next through a real SVG gooey filter with blur and opacity blending, not a simple crossfade. Enable a custom font, color, or both on any word, everything else uses your global defaults.
KEY FEATURES
Real SVG gooey morph effect, not a basic crossfade
Per-word font override, mix family, weight, size, style, and alignment freely
Per-word color override, give any word its own text color
Global fallback typography and color for words left on default settings
Adjustable morph duration and pause between words
Adjustable blur intensity, from a subtle wobble to a full liquid melt
Auto-sizing container based on your longest word, no layout jump
Viewport-aware, only animates when scrolled into view
Static-safe rendering for the Framer canvas and thumbnails
Zero third-party dependencies, single self-contained code component
WHY IT WORKS A rotating headline often needs more than word changes to land, a bold accent-colored font for the keyword, a lighter neutral phrase around it. TypeMorphix makes that possible in one component, without stacking text layers.
PERFECT FOR Hero section headlines, rotating value propositions, agency taglines, brand-color keyword callouts, and any Framer site that wants a morphing text element with real typographic and color range.
WHAT'S INCLUDED A single drop-in code component. Add up to 20 words, enable custom font and color on any of them, and tune morph timing, blur, and defaults through property controls.
Drop it in, mix your fonts and colors, and let the morph do the talking.
TypeMorphix is a premium Framer component that morphs rotating text through a gooey liquid transition, built so every word or phrase can carry its own font and its own color.
Where a typical text morph component locks your rotation to one typeface and one color, TypeMorphix lets each word switch font, size, alignment, and color independently.
WHAT IT DOES Add unlimited words or phrases to a rotating sequence. Each one morphs into the next through a real SVG gooey filter with blur and opacity blending, not a simple crossfade. Enable a custom font, color, or both on any word, everything else uses your global defaults.
KEY FEATURES
Real SVG gooey morph effect, not a basic crossfade
Per-word font override, mix family, weight, size, style, and alignment freely
Per-word color override, give any word its own text color
Global fallback typography and color for words left on default settings
Adjustable morph duration and pause between words
Adjustable blur intensity, from a subtle wobble to a full liquid melt
Auto-sizing container based on your longest word, no layout jump
Viewport-aware, only animates when scrolled into view
Static-safe rendering for the Framer canvas and thumbnails
Zero third-party dependencies, single self-contained code component
WHY IT WORKS A rotating headline often needs more than word changes to land, a bold accent-colored font for the keyword, a lighter neutral phrase around it. TypeMorphix makes that possible in one component, without stacking text layers.
PERFECT FOR Hero section headlines, rotating value propositions, agency taglines, brand-color keyword callouts, and any Framer site that wants a morphing text element with real typographic and color range.
WHAT'S INCLUDED A single drop-in code component. Add up to 20 words, enable custom font and color on any of them, and tune morph timing, blur, and defaults through property controls.
Drop it in, mix your fonts and colors, and let the morph do the talking.
