Kinetic typography: words that build themselves
Letters rise and turn into place one after another, hold, then lift away. Eight seconds, then it starts again.
Motion loop
Words that build themselves
Sundry Millsundrymill.com/library
Everything in the preview is live. Try it.
The font
Set in Satoshi (Fontshare) with one word in Instrument Serif Italic (Google Fonts). Both free. The pair has its own page.
The code
Kinetic type
Write the sentence in plain text with data-kinetic; the script splits it.
HTML
<p class="kt" data-kinetic>Make small things well.</p>CSS
.kt {
margin: 0;
font: 900 clamp(2.4rem, 11vw, 4.2rem)/1.02 'Satoshi', system-ui, sans-serif;
letter-spacing: -0.03em;
color: #17202C;
}
.kt-w { display: inline-block; white-space: nowrap; }
.kt-serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-style: italic; color: #D9581A; letter-spacing: 0; }
.kt-l {
display: inline-block;
opacity: 0;
transform: translateY(.6em) rotate(8deg);
animation: kt-in 8s cubic-bezier(.05, .7, .1, 1) infinite both;
animation-delay: calc(var(--i) * 45ms);
}
@keyframes kt-in {
0% { opacity: 0; transform: translateY(.6em) rotate(8deg); }
8%, 80% { opacity: 1; transform: none; }
90%, 100% { opacity: 0; transform: translateY(-.35em); }
}JavaScript
// Wraps each letter in a span with its index, keeps words together,
// and gives the sentence one label for screen readers.
document.querySelectorAll('[data-kinetic]').forEach((el) => {
let i = 0;
const words = el.textContent.trim().split(/\s+/);
el.setAttribute('aria-label', words.join(' '));
el.innerHTML = words
.map((w) => '<span class="kt-w" aria-hidden="true">' +
[...w].map((ch) => '<span class="kt-l" style="--i:' + i++ + '">' + ch + '</span>').join('') +
'</span>')
.join(' ');
});How to use it
- The script wraps each letter in a span with an index, and the CSS delays each letter by 45 ms times that index. Change 45 to speed it up or slow it down.
- Screen readers get the whole sentence once from the aria-label, not letter by letter.
- Short lines work best. Four or five words is plenty for a loop.
Want words moving like this over a video? Reyoy turns a post into a vertical video, free.
Free to use in personal and commercial work. No credit needed, though a link back is always nice.
