Never gate reading

Content is there on load. Motion can only add to it.

From vercel-design-md, "Motion and delight", on scroll reveals.

Text waiting for a scroll

Scroll each pane, then break the reveal script.

Reveal on scrollBad
opacity: 0 until observed
Visible on loadGood
opacity: 1
/* Bad: the text exists only after a script says so. */
.section { opacity: 0; transform: translateY(24px); }
.section.shown { opacity: 1; transform: none; }

/* Good: the page is complete. Add polish on top, never a gate. */
.section { opacity: 1; }

Why it matters, pros and cons

Why it matters

A slow, blocked or failed script leaves the reader with blank sections.

Fast scrollers and skimmers wait for text they have already scrolled past.

The base page should be complete without motion; motion is an extra.

Pros

  • Text is readable the moment the page paints.
  • Nothing breaks when scripts or animation are off.
  • Less JavaScript on the critical path.

Cons

  • You give up an easy way to make long pages feel staged.
  • Any entrance effect must leave the text itself visible.
  • Existing reveal wrappers need unpicking, section by section.