Staggered slice reveal
Multiple clip-path bands animate in sequence rather than one wipe.
Hover & Transition Templates · v1.0.0
Aperture
Clip-path slices peel back under the cursor.
Rated 4.5 out of 5 based on 118 reviews.1.7k sold1 variationUpdated September 20, 2026
01 / 04Click to enlarge
HoverClip-pathCardsMonospace
Overview
Aperture is a twelve-card grid where hovering animates a series of clip-path slices to peel back the surface and reveal the image and text beneath. The slices stagger, so the reveal has direction.
It is the cheapest template in the catalogue and the easiest to retrofit - the effect attaches to any card-shaped element, so most buyers drop it onto a layout they already have.
Best for: Card grids, news indexes and anything where hover needs to reward the cursor.
What makes it different
Retrofits easily
Binds to a card selector; no layout assumptions beyond a positioned container.
Monospaced by design
Self-hosted Space Mono throughout gives it a technical, OCR-adjacent look.
No build step
Static files, GSAP vendored locally.
In the box
- 12-card hover grid
- GSAP 3.15 + Splitting.js + imagesLoaded, vendored
- Self-hosted Space Mono
- 9 sample images
Built with
- GSAP 3.15
- Splitting.js
- imagesLoaded
Questions about Aperture
Does it work on touch?
Touch has no hover, so tiles reveal on tap instead. That switch is one flag in the script.
Can I change the number of slices?
Yes, it is a single constant. More slices read finer; fewer read bolder.
Still unsure? Email us - or read how to choose a template.
Related
You might also consider
56% offGlyphset
$27$12
Caption letters scatter across the artwork, then fly home.
TypographyRated 4.6 out of 5 from 33 reviews.
27% offUnfold
$26$19
A preview card expands into the full article, image and text together.
InteractionRated 4.8 out of 5 from 52 reviews.
44% offStencil
$45$25
Full-bleed imagery revealed through giant clipped lettering.
TypographyRated 5 out of 5 from 64 reviews.