Tailwind UI Pattern Registry for humans and agents

scroll unmask reveal clip-path scroll-driven animation progressive image reveal on scroll editorial content unmasking portfolio section entrance effect simple fade-in feels too common want cinematic reveal on scroll need clip-path scroll animation without JS

Scroll Unmask

Fetch snippet JSON: curl https://webspire.de/snippets/scroll/scroll-unmask.json
Format
Mask reveal Bottom / left
From bottom
Poster block Reveals upward as the element enters
From left
Media tile Opens horizontally while it moves into view
Stage Background

Quick Start

<img class="scroll-unmask" src="/placeholder.svg" alt="Reveal">

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion, @supports fallback
Size
842 bytes · 48 lines
Classes
.scroll-unmask.scroll-unmask-left
scroll unmask reveal clip-path scroll-driven animation

Two variants: .scroll-unmask reveals from bottom to top, .scroll-unmask-left reveals from right to left. Both are driven by scroll position using animation-timeline: view().

<div class="grid grid-cols-2 gap-4">
  <img class="scroll-unmask rounded-xl" src="/placeholder.svg" alt="Photo 1">
  <img class="scroll-unmask-left rounded-xl" src="/placeholder.svg" alt="Photo 2">
</div>