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
Variants
- continuous
- hover only
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 "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.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.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.ABCDEF
Letters drip and stretch downward as if melting.
Use for
Horror or novelty titles
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.More in Text
ABC DEFGHI JKLMNO PQR
Scroll inside
Sticky Text Fade
Also called Sticky Scroll Text Opacity Fade
Text stays pinned while lines fade in and out with scroll progress.
Use for
Scrollytelling
Add a "Sticky Text Fade" effect (also called sticky scroll text opacity fade) to [where].
While the section scrolls, the text block should stay pinned in place and its lines should fade in and out one at a time with the scroll progress.
Tie the fades directly to the scroll position so scrolling back reverses them, and keep every line available to screen readers whatever its opacity.Stroke Text Draw
Also called Draw In Text, Animated Stroke Text
Letter outlines are drawn as a stroke before the fill appears.
Use for
Logos, hero words
Add a "Stroke Text Draw" effect (also called draw in text or animated stroke text) to [where].
The letter outlines should draw themselves in smoothly, and once the outlines are complete the fill should fade in.
Play it once on load, keep the word accessible as real text, and show the filled text straight away for users who prefer reduced motion.AGBHCIDJEKFL
Hover to play
Text 3D Flip
Also called 3D Flip Text Reveal
Letters or words rotate around an axis in 3D to show the next text on their back side.
Use for
Hover links, headings
Add a "Text 3D Flip" hover effect (also called 3D flip text reveal) to [where].
When the pointer is over the text, each letter should roll over on its horizontal axis in 3D to show a new letter on its other side, one after another in a quick, smooth sweep, and roll back when the pointer leaves.
Keep the text box the same size during the flip, and show the same effect on keyboard focus.