Skip to content
Swift

Kinetic Typography Templates · v1.0.0

Glyphset

Caption letters scatter across the artwork, then fly home.

Rated 4.6 out of 5 based on 33 reviews.520 sold2 variationsUpdated September 20, 2026
01 / 04Click to enlarge
Screenshots of the Glyphset template: Caption letters scatter across the artwork, then fly home.
Split textHoverCardsPanel

Overview

Glyphset is a three-card panel layout where hovering a card scatters its caption into individual letters across the artwork, and opening the card flies them back into formation.

It is a quieter template than most of the catalogue - the motion is in service of the images rather than competing with them. Good for a studio with a handful of projects worth looking at slowly.

Best for: Small project showcases where three pieces of work need to feel considered.

What makes it different

1

Per-letter scatter

Captions split to characters and distribute across the image, then reassemble on open.

2

Card open transition

Neighbours slide aside as the selected card expands into its detail view.

3

Two panel sections

Different palettes and image sets, so the page has somewhere to go.

4

Restrained by design

Generous margins and a serif display face; the work stays the loudest thing on screen.

In the box

  • 3-card panel layout with 2 sections
  • GSAP 3.15 + Splitting.js + imagesLoaded
  • Self-hosted Archivo and Instrument Serif
  • 6 sample images

Built with

  • GSAP 3.15
  • Splitting.js
  • Parcel

Questions about Glyphset

Does it need a build step?

Yes. It uses npm modules and Parcel - run npm install and npm run build before deploying. The README walks through it.

Can I add more than three cards?

Yes, the layout is a grid and the JS binds to all matching cards. Four or five works; beyond that the scatter gets crowded.

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.