Skip to content
Swift

Kinetic Typography Templates · v1.0.0

Kinetic

Fifteen scroll-driven typography effects in one page.

Rated 4.8 out of 5 based on 112 reviews.1.6k sold15 variationsUpdated September 20, 2026
01 / 04Click to enlarge
Screenshots of the Kinetic template: Fifteen scroll-driven typography effects in one page.
Split textScrollShowcaseVariable fonts

Overview

Kinetic is fifteen distinct character-level animations on one scrolling page - letters rising, rotating, skewing, staggering, arriving from depth. It is built as a reference you raid rather than a page you ship whole.

Every effect is isolated behind a data attribute, so lifting one into your own project means copying a block of CSS and a few lines of timeline. Nine self-hosted display families ship with it to give the effects genuine typographic range.

Best for: Designers who want a library of type moves to pull from, not a single effect.

What makes it different

1

Fifteen isolated effects

Each keyed to a data attribute, each independently liftable. No shared state to untangle.

2

Character-level control

Splitting.js breaks text into spans; the timelines stagger per character, word or line.

3

Nine display families

Anton, Bodoni Moda, Archivo Black, Syne, Big Shoulders, Silkscreen, Space Mono and more, all self-hosted.

4

Sibling set included

Pairs with Letterpress, which adds fourteen more effects in the same structure.

In the box

  • 1 page with 15 scroll typography effects
  • GSAP 3.15 + ScrollTrigger + Splitting.js
  • 9 self-hosted open-licence display families
  • Per-effect CSS isolated for easy extraction

Built with

  • GSAP 3.15
  • ScrollTrigger
  • Splitting.js

Questions about Kinetic

What is the difference between Kinetic and Letterpress?

Same engine, different effects - Kinetic has fifteen, Letterpress has fourteen more. Buy both if you want the full set of twenty-nine.

Does it need a build step?

Yes, this one uses npm modules and Parcel. The README covers it; it is two commands.

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

Related

You might also consider

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.
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.
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.