Extended Module

Masks

Shape-based clip-path reveal animations. Elements appear through expanding geometric masks — circles, diamonds, swipes, slashes, and triangles. Click any card to replay.

gleam-reveals.css 8 mask shapes clip-path animation 
<!-- Mask classes live in gleam-reveals.css -->
<div class="gleam mask-circle">...</div>
<div class="gleam mask-diamond">...</div>

<!-- Control timing -->
.hero-img {
  --duration: 1200ms;
  --ease: var(--ease-spring);
}

Mask Shapes — click to replay

mask-circle
mask-diamond
mask-swipe-up
mask-swipe-down
mask-swipe-left
mask-swipe-right
mask-slash
mask-triangle

Great for Images

Mask reveals are especially impactful on photos and full-bleed images. Combine with scroll-trigger for dramatic page sections.

<img class="gleam mask-circle util-duration-800"
     src="hero.jpg">

<!-- Scroll-triggered -->
<img data-gleam="mask-swipe-right"
     data-gleam-scroll
     data-gleam-duration="1000"
     src="photo.jpg">