Skip to content
Swift

Kinetic Typography Templates · v1.0.0

Cleaver

Headlines that slice apart and reassemble as you scroll.

Rated 4.9 out of 5 based on 87 reviews.1.2k sold6 variationsUpdated September 20, 2026
01 / 04Click to enlarge
Screenshots of the Cleaver template: Headlines that slice apart and reassemble as you scroll.
Split textScrollEditorialDark

Overview

Cleaver cuts a headline into horizontal segments and offsets them as the page scrolls, so a word arrives fractured and resolves into place. Six variations ship with it - different slice counts, rotations, colour treatments and blend modes - and photographs sit inside the letterforms rather than behind them.

It is built on GSAP ScrollTrigger with Lenis for smoothing, no framework, no build step. Drop the folder on a server and it runs. The type is self-hosted Archivo and Bodoni Moda, so nothing phones home and nothing breaks when a font CDN has a bad day.

Best for: Agency and portfolio hero sections that need one unforgettable moment.

What makes it different

1

Six slice variations

Segment count, rotation, offset direction, colour and blend mode all differ - pick one or sequence several down a page.

2

Images inside letterforms

Photographs clip to the type, so the headline carries the art direction instead of sitting above it.

3

Scrub-linked, not triggered

The slicing tracks scroll position continuously, so it reads correctly whether the visitor creeps or flings.

4

No build step

Static HTML, CSS and JS with GSAP vendored locally. Open it, edit it, ship it.

In the box

  • 1 page with 6 slice effect variations
  • GSAP 3.15 + ScrollTrigger + Lenis, vendored
  • Self-hosted Archivo, Bodoni Moda, Instrument Serif and Space Mono
  • 9 sample images, swap for your own
  • Commented source, no build tooling required

Built with

  • GSAP 3.15
  • ScrollTrigger
  • Lenis
  • Vanilla JS

Questions about Cleaver

Do I need to know GSAP?

No. The effect parameters sit at the top of one file as plain numbers - slice count, offset, rotation. Change them and reload.

Will it work with React or Next.js?

The animation logic is framework-free. Most buyers lift the JS into a useEffect and the CSS into a module; it takes about twenty minutes.

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

Related

You might also consider

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.
Stencil template - Full-bleed imagery revealed through giant clipped lettering.44% off

Stencil

$45$25

Full-bleed imagery revealed through giant clipped lettering.

TypographyRated 5 out of 5 from 64 reviews.