Skip to content
Swift

Kinetic Typography Templates · v1.0.0

Stencil

Full-bleed imagery revealed through giant clipped lettering.

Rated 5 out of 5 based on 64 reviews.980 sold9 variationsUpdated September 20, 2026
01 / 04Click to enlarge
Screenshots of the Stencil template: Full-bleed imagery revealed through giant clipped lettering.
Clip-pathSVGScrollVideo

Overview

Stencil masks photography and video inside SVG letterforms, then drives the mask as you scroll. Nine sections each handle the reveal differently - letters widening, imagery sliding behind fixed type, words assembling from fragments.

It is the most visually ambitious template in the catalogue and the one most often bought for a single hero. Four original display faces are included alongside self-hosted open-licence families, so the typography is part of what you are buying, not a substitution you have to make later.

Best for: Launch pages and brand sites that need to look like a film title sequence.

What makes it different

1

Nine clip-path sections

Each one solves the reveal differently, so a long page never repeats itself.

2

Video inside type

Not just stills - a looping video masked to letterforms, with a poster fallback.

3

Real display typography

Four original webfonts plus self-hosted Anton, Archivo Black, Big Shoulders and Bodoni Moda.

4

Scroll-linked masking

The clip geometry is driven by scroll progress, so the reveal is scrubbable both ways.

In the box

  • 1 long-form page with 9 clip-path sections
  • GSAP 3.15 + ScrollTrigger + Lenis, vendored
  • 4 original display webfonts + 4 self-hosted open families
  • Sample imagery and a looping video asset
  • SVG mask source you can edit in any vector tool

Built with

  • GSAP 3.15
  • ScrollTrigger
  • Lenis
  • SVG

Questions about Stencil

Can I use my own typeface for the masks?

Yes - the masks are real SVG text, so any font you can load will clip. Convert to outlines only if you need pixel-exact kerning.

How does it perform on mobile?

The SVG masks are cheap; the video is the cost. It ships with a reduced-motion path and a still fallback below 768px.

Still unsure? Email us - or read how to choose a template.

Related

You might also consider

Cleaver template - Headlines that slice apart and reassemble as you scroll.60% off

Cleaver

$40$16

Headlines that slice apart and reassemble as you scroll.

TypographyRated 4.9 out of 5 from 87 reviews.
Kinetic template - Fifteen scroll-driven typography effects in one page.50% off

Kinetic

$44$22

Fifteen scroll-driven typography effects in one page.

TypographyRated 4.8 out of 5 from 112 reviews.
Letterpress template - Fourteen more type effects, with three-dimensional character transforms.55% off

Letterpress

$44$20

Fourteen more type effects, with three-dimensional character transforms.

TypographyRated 4.7 out of 5 from 41 reviews.