Three Words, One DNA
The story behind The Suffix
Inspired by Kinetic typography on Wikipedia
Built with GSAP · CSS Transforms · DOM
Techniques Chromatic Glitch Effects · Staggered DOM Animation
Direction Force three words for movement — ANIMATION, MOTION, ACTION — to share a single set of letters, turning kinetic typography into a territorial dispute
Result A looping typographic cage match where each word types itself into existence, holds the space, then glitches out as the next competitor scrambles the shared characters
The Story
Kinetic typography has been around since the 1960s, when it emerged as a technique for animated film title sequences. But the Wikipedia article on kinetic typography sparked a different question: what happens when words that mean movement share the same building blocks?
ANIMATION. MOTION. ACTION.
Three words for change. Three ways to describe something that refuses to stay still. And buried in their letters, a shared genetic code: A-T-I-O-N. The suffix. The common ending that unites them.
We have many words for movement, but they’re all built on the same foundation.
The Take
This experience treats typography as territory. Three words compete for the same finite resource - a set of letters that can only belong to one word at a time.
The metaphor isn’t subtle. We all share DNA. We all fight for the same resources. The suffix “-tion” appears in thousands of English words - it’s linguistic infrastructure, a pattern so deeply embedded we barely notice it. But when you force three words to literally share the same characters, the competition becomes visceral.
Each word gets its moment. It types itself into existence with the confidence of sole ownership. Then the glitch hits. The letters scramble, rebel, reorganize themselves into a competitor. No word holds the space forever.
The Tech
GSAP powers the entire experience. Every keystroke, every glitch, every chromatic explosion flows through the GreenSock Animation Platform.
The core loop is deceptively simple:
-
Type phase: Characters appear one by one with screen shake and micro-flashes. Each letter drops in from above with slight overshoot.
-
Hold phase: The word sits there, complete, triumphant. A moment of stability before chaos.
-
Glitch transition: This is where the visual violence happens. Characters split into RGB channels (the
.glitchclass applies red/cyan offset via CSStext-shadow). Random characters flash through - letters, numbers, symbols. Each character jitters spatially. Then the chromatic explosion: characters fly outward in random directions while the static layer flares.
The character scramble uses a simple approach: pick random characters from a pool and swap them in rapid succession. Eight rounds at 40ms each creates the stuttering digital breakdown effect.
No Three.js. No WebGL shaders. Just DOM elements, CSS transforms, and GSAP’s surgical control over timing.
The Experience
Just watch.
The experience is passive. There’s no interaction required - the loop runs continuously. You’re witnessing a territorial dispute in real-time. Each word claims its space, then loses it.
The bright white background (with dark chrome theme) creates that stark, clinical quality where the violence of the transitions reads more clearly. It’s a word processor having a breakdown.
Pay attention to the cursor. It blinks faster during typing, stabilizes during the hold, and disappears entirely during the glitch. Even punctuation has opinions about what’s happening.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.