Three ways text moves: letters typed in, a word rolling up, a light sweeping across
Typewriter vs. Rotating Words vs. Text Shimmer
/ background-clip: text · steps() /
also called typing animation, typing effect, word rotator, flip words, shiny text, thinking shimmer
“Text that appears letter after letter” is a typewriter effect, “the word that rolls up” is rotating words, and “the gray Thinking… with light sweeping over it” is a text shimmer. A typewriter types behind a blinking caret (Magic UI TypingAnimation); rotating words swap one word in a landing page headline, the old one rolling up as the next rolls in (WordRotate, Aceternity UI FlipWords); a shimmer sweeps a light band across gray text with background-clip: text, the way AI apps say the model is “Thinking…”. A skeleton's shimmer sweeps gray placeholder blocks, not text; a text scramble churns random characters; a marquee scrolls a whole line sideways.
If you called it…
…you meant Typewriter vs. Rotating Words vs. Text Shimmer.
Anatomy — every part, named
- 1Typing caret
cursorStyle (Magic UI TypingAnimation)“The little line blinking after the letters” is the typing caret, solid while it types and blinking while it waits.
- 2Incoming word
<WordRotate> (Magic UI)“The next word coming up from underneath” is the incoming word, sliding into a clipped slot as the old word leaves upward.
- 3Shine band
background-clip: text“The bright stripe that runs across the gray text” is the shine band, a gradient clipped to the letters and slid sideways.
Prompt — paste into your agent
Build the text effect that matches: a typewriter (Magic UI TypingAnimation) typing letters behind a blinking caret; rotating words (Magic UI WordRotate) rolling the old word up and out as the next slides in from below, in a clipped slot whose width eases; or a text shimmer (background-clip: text) sweeping a bright band across gray text. Keep the full text readable to screen readers, and stop the motion under prefers-reduced-motion.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my text animation (typewriter, rotating words or text shimmer; background-clip: text, steps(), WordRotate). Rule out: the line jumping as letters type because the box sizes to the typed text instead of the full phrase; the rotating word's box snapping to the new width instead of animating it; the old and new word overlapping because the slot has no overflow clip; the shimmer showing a colored rectangle because background-clip: text is missing its -webkit- prefix or the text color isn't transparent; a visible jump each loop because the band starts on the text instead of off it; screen readers reading every typed letter; motion still running under prefers-reduced-motion. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| CSS | background-clip: text | the shimmer: a moving gradient painted only inside the letters |
| CSS | steps() | the typewriter's hard on/off caret blink |
| shadcn/ui | shimmer | CSS utility, shimmer-duration-<ms>, 2000 ms by default |
| Magic UI | <TypingAnimation> | typeSpeed, deleteSpeed, cursorStyle |
| Magic UI | <WordRotate> | also Aceternity UI FlipWords, React Bits RotatingText |
| motion-primitives | <TextShimmer> | also Magic UI Animated Shiny Text |