Kinetic Type.

Enormous uppercase titles whose words rise out of masks, with every title ticking along the bottom edge.

Look

As designed

Use Kinetic Type in the Studio Open full screen

How it moves

Typography is the image: near-black ground, off-white ink, one acid-lime word per key slide. Use it when the titles carry the story and the objects can sit quietly underneath.

This is the specification the Studio sends to the model, written for Kinetic Type's own look. Change the look in the Studio and every value follows.

Palette

Background#0b0b0b
Text#f4f4f0
Muted#8a8a84
Accent#d7ff3f
Surfacergba(255,255,255,.05)
Hairlinergba(255,255,255,.14)

Type: Syne (display) + DM Sans (body). Corners: 6px.

Layout

Full-bleed dark stage (#0b0b0b), no chrome: position fixed inset 0, padding 8vh 6vw 12vh, display grid; every slide sits in that one grid cell. A slide is a three-row grid (title, rule, body) with 3vh gaps, aligned to the top; the bottom 12vh belongs to the ticker. Inactive slides are visibility hidden after a .65s delay so exits play out, and nothing else on the page ever moves.
Typography is the image. Title: <h2 class="title"> in the display face ('Syne', system-ui, sans-serif) at clamp(3rem,7.5vw,8.8rem), weight 800, line-height .92, letter-spacing -.03em, uppercase, #f4f4f0, with 8vw right padding so it never runs under the index; at this size most titles wrap to two lines and that is intended. The title is a flex-wrap row (column gap .22em, no row gap) of word masks built by JS: <span class="w" style="--k:0"><i>word</i></span>, the mask overflow hidden with .12em bottom padding and -.12em bottom margin so tails are not clipped. A <b> around a word in the h2 marks the accent word: its mask gets class hl and the word is #d7ff3f. One accent word on the cover and on one or two other slides, never more.
Word motion, transform only. Future: .w i { transform: translateY(110%) }. Active: transform none, transition transform .8s cubic-bezier(.2,.8,.2,1), transition-delay calc(.1s + var(--k) * 70ms), so the words rise out of their masks one after another. Past: transform translateY(-110%) with the leave transition transform .45s cubic-bezier(.6,0,.8,.2), delay calc(var(--k) * 40ms), so they lift up and out in quick succession. Going back (active to future) drops them down with that same .45s leave transition; nothing snaps in either direction.
Rule. a 2px line in #f4f4f0 under the title, transform scaleX(0), transform-origin left. Active: scaleX(1) over .9s cubic-bezier(.2,.8,.2,1) delayed .5s. Leaving: scaleX(0) over .4s cubic-bezier(.6,0,.8,.2), origin right when going forward, left when going back.
Body. a flex column (gap 1.2rem, max-width 74rem, min-width 0) holding a muted lede (max-width 40ch) and one object; rings are sized clamp(6.5rem,10vw,9.5rem) and quote text clamp(1.2rem,1.9vw,1.9rem) so the objects sit under the title. Hidden: opacity 0, translateY(20px). Active: opacity 1, translateY 0 over .6s cubic-bezier(.2,.8,.2,1) delayed .65s. Leaving: fades in .25s with no delay (to -20px going forward). <body data-reveal-delay="750" data-animate-delay="900"> so the objects stagger in and charts start once the body has landed. The body must fit under a two-line title at 1280×720; shrink the title clamp slightly if it does not.
Index, top right (top 8vh, right 6vw): the slide number "02" in the display face, weight 800, clamp(2rem,4vw,4rem), transparent fill with a 1px #8a8a84 -webkit-text-stroke, inside an overflow-hidden mask. On change the old number lifts out (to translateY(-110%), .4s cubic-bezier(.6,0,.8,.2)) while the new one rises in (from translateY(110%), .5s cubic-bezier(.2,.8,.2,1)).
Ticker, fixed to the bottom edge, full width, 2.75rem tall, 1px top hairline (rgba(255,255,255,.14)), background #0b0b0b: every slide title as a <button data-goto> in the body face, .75rem, weight 500, uppercase, letter-spacing .14em, #8a8a84, separated by a 5px square in #d7ff3f with 1.5rem either side. The track holds the sequence twice (each half repeated until it is wider than the viewport) and animates translateX 0 → -50%, linear, infinite, duration = half width ÷ 30px per second (about 37s per pass of the titles at 1280 wide); it pauses on hover. The current title is #f4f4f0; the engine toggles .active on [data-goto] on every change.
Hint bottom left, "→ next · ← back", #8a8a84 .8rem, fades out after the first slide. No shadows, gradients or decoration: the accent appears only in the highlighted word, the ticker marks and the objects.
Under 760px: stage padding 12vh 5vw 10vh, title clamp(2.2rem,10vw,8.8rem) with no right padding, index at top 3vh, ticker text .62rem, and the slide may scroll.

Navigation. ← → ↑ ↓ Space PageUp/PageDown move; Home/End; number keys 1-9 jump; clicking a title in the ticker jumps to it. No wheel navigation.