Melting Text
Letters drip and stretch downward as if melting.
Use for
Horror or novelty titles
Variants
- SVG filter melt
Prompt
Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.
Add a "Melting Text" effect to [where].
The letters should slowly sag downward while drips stretch out below them, as if they are melting, and come to rest in a still, melted look.
Play it once when the text comes into view, keep the word readable at the end, and skip the motion for users who prefer reduced motion.Similar motions
ABC
ABC
Hover to play
SVG Displacement Distortion
Also called feTurbulence Distortion, Displacement Map Effect
An SVG filter warps text or shapes with animated noise.
Use for
Liquid or ripple hover
Add an "SVG Displacement Distortion" hover effect (also called a displacement map effect) to [where].
While the pointer is over it, the text or shape should ripple and wobble as if seen through moving water, fading in softly, and return to crisp when the pointer leaves.
Apply the distortion filter only while the effect is active so it costs nothing at rest, and show the same effect on keyboard focus.ABCDEF
Squiggly Text
Also called Wobbly Text, Turbulence Text
Letter edges wiggle as if hand-drawn using an SVG displacement filter.
Use for
Sketchy or playful headings
Add a "Squiggly Text" effect (also called wobbly text or turbulence text) to [where].
The letter edges should wobble slightly as if hand-drawn and redrawn several times a second: a subtle, jittery boil rather than a smooth wave.
Keep the text readable, and hold it still for users who prefer reduced motion.ABCDEFGHIJABCDEFGHIJ
Text Distortion
Also called Organic Text Distortion
Text warps and ripples organically, driven by scrolling or pointer movement.
Use for
Experimental portfolios
Add a "Text Distortion" effect (also called organic text distortion) to [where].
A row of text should flow sideways endlessly and warp and ripple organically as it moves, as if seen through moving water, with the flow driven by the user's scrolling.
Keep the distortion light enough that the text stays legible, keep it smooth on slower devices, and turn it off for users who prefer reduced motion.More in Text
ABCDEFGHI
Morphing Text
Also called Text Morph
One word blurs and blends into the next in the same spot.
Use for
Hero taglines
Add a "Morphing Text" effect (also called text morph) to [where].
One word should blur and melt into the next in the same spot with a soft, gooey merge, then hold still for a moment before the next change.
Cycle through the words seamlessly, let screen readers read the words as plain text, and stop cycling for users who prefer reduced motion.ABCDEF
Neon Glow Text
Also called Neon Sign Flicker, Glowing Text
Text glows like a neon tube and flickers or pulses.
Use for
Nightlife, gaming themes
Add a "Neon Glow Text" effect (also called a neon sign flicker or glowing text) to [where].
The text should glow like a neon tube with a soft, steady light, and now and then flicker off briefly like a real sign.
Keep the flicker occasional rather than rapid, since fast flashing can harm some users, and keep the glow steady for users who prefer reduced motion.A
E
I
MB
F
J
NC
G
K
OD
H
L
PQ
R
S
T
Scroll inside
Scrolling Letters
Also called On-Scroll Letter Animations
Letters of a title shuffle or move sequentially as the user scrolls through sections.
Use for
Section indicators
Add "Scrolling Letters" (also called on-scroll letter animations) to [where].
As the user scrolls through the sections, the letters of the title should roll to their next characters one after another from left to right, tied directly to the scroll position.
Scrolling back up should roll them back, and screen readers should get the current title as plain text.