mask reveal overlay panel card promo cards and CTAs with a stronger first-state cover category tiles where hover reveals more neutral content beneath Tailwind surfaces that need a clean unreveal motion ordinary overlays fade in but do not create a real before-and-after state need a directional panel reveal without complex markup want a boxy reveal inspired by menu unreveal motion but practical for cards
Box Unreveal
Fetch snippet JSON:
curl https://webspire.de/snippets/masks/box-unreveal.json The color panel slides away and exposes the calmer base surface underneath.
Background
Customize
Quick Start
<article class="box-unreveal relative rounded-[1.25rem] border border-white/10 bg-slate-950/80 p-6 text-white">...</article>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 658 bytes · 29 lines
- Custom Properties
-
--box-unreveal-duration--box-unreveal-bg - Classes
-
.box-unreveal
mask reveal overlay panel card
This is a practical unreveal-style effect for cards and promo surfaces. Instead of adding a hover overlay, it starts covered and then peels that cover away, which gives the card a much clearer first-state and hover-state contrast.
Promo card
<article class="box-unreveal relative rounded-[1.25rem] border border-white/10 bg-slate-950/80 p-6 text-white">
<h3 class="text-xl font-semibold">Automation</h3>
<p class="mt-2 text-sm leading-6 text-white/70">The colored panel slides away and reveals the base surface.</p>
</article>