Back

Scroll Mask Scroller

  1. 01The first row remains crisp while the top edge gently clears as you scroll.
  2. 02Masking leaves scrollbar space untouched so the track does not get faded out.
  3. 03The enhancement is CSS-only and still reads as a normal scroller in older browsers.
  4. 04Rows can be any content: settings, logs, messages, or dense dashboard events.
  5. 05A short scroll-linked animation changes the mask during the first local rem of scroll.
  6. 06The component keeps keyboard focus visible and preserves native wheel behavior.
  7. 07The scroll mask is deliberately subtle so content does not feel hidden.
  8. 08Use it around lists where clipping needs to feel polished instead of abrupt.
  9. 09The base mask works without scroll-timeline support.
  10. 10The final row is fully readable after the edge fade.

Component Code (Next.js)

Use Copy Code to load the current local source for the Scroll mask scroller.

Claude / Codex Prompt

Create a copyable CSS scroll masking component as a progressive enhancement.
- Build a normal accessible scroll container first.
- Add mask-repeat: no-repeat and leave scrollbar space using calc(100% - 10px).
- Use scroll-linked CSS animation with animation-timeline: scroll(self), animation-range: 0 1rem, and mask-composite: exclude.
- Include reduced-motion handling and a browser fallback when scroll timelines are not available.