No decorative motion

Marquees, cursors, pulses, bounce and parallax say nothing.

From vercel-design-md, "Motion and delight".

Five effects, no information

Switch the effects off one by one.

Everything movingBad
5 looping effects
Nothing movingGood
no animation
/* Same card. The status already says "Ready", so the dot is still. */
.status-dot { background: var(--good); }

/* Not this: */
.status-dot::after { animation: pulse 1.6s infinite; }
.ticker-track      { animation: marquee 8s linear infinite; }
.caret             { animation: blink 1s steps(1) infinite; }

Why it matters, pros and cons

Why it matters

Each effect repeats what the text already says.

Looping motion keeps pulling the eye from what people came to read.

Bounce and parallax ignore people who asked their device for less motion.

Pros

  • Numbers and status text stay easy to scan.
  • Nothing loops, so nothing needs a pause control.
  • Less CSS and JS to ship, test and keep in sync.

Cons

  • A live indicator can be right when it reports real state.
  • Plain pages need stronger type and layout to hold interest.
  • What counts as decorative is a call to make per screen.