Morph Text

Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect

Morph Text

Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect

text text-effect typography morph gooey kinetic animation

Install

Terminal

npx hyperframes add morph-text

Details

Property	Value
Type	Component

Files

File	Target	Type
morph-text.html	compositions/components/morph-text.html	hyperframes:snippet

Usage

Open compositions/components/morph-text.html and paste its contents into your composition.

Edit the <ol id="morph-words"> list to change the statements that cycle through. Each <li> accepts data-font (CSS font-family) and data-color (hex) attributes. Adjust data-morph-speed (seconds per transition) and data-morph-pause (hold time) on the root element.