# Kinetic Typography > Type is the moving image: headlines reveal letter by letter, weights breathe on a variable font and marquee bands scroll — with a calm static fallback. - Nickname: Moving type - Also called: Motion Typography, Animated Type, Type in Motion - Category: Editorial & Typographic - Moods: Bold, Techy, Edgy, Luxury - Industries: Media & Entertainment, Creative & Portfolio, Startup & Tech, Gaming, AI Products - Style page: https://uilingo.dev/styles/kinetic-typography/ Kinetic Typography makes the words themselves the animation. Headlines rise in letter by letter, a variable display face pulses between hairline and black weights in a slow wave, and huge outlined lines of text scroll as marquee bands between sections. Everything else is quiet — a near-black stage, off-white type, one violet and one coral highlight, soft pill controls — so the motion reads as choreography rather than noise. Every effect sits behind prefers-reduced-motion and degrades to crisp static type. ## Best for - Launch and campaign pages - Music, film, festivals and events - Agency and studio showreels - Editorial features with one big idea ## Avoid for - Long reading or documentation pages - Audiences sensitive to motion (vestibular disorders) without a reduced-motion path - Forms and checkout flows where motion distracts ## Do - Reveal one headline at a time (32ms stagger per letter — per word in Thai — and 900ms per unit on cubic-bezier(.16,1,.3,1)); only the hero wave, the two marquees and the feature-index swell (while in view, with the hero wave paused) loop - Use a true variable font and animate font-variation-settings (hero wave wght 800 ↔ 220, index swell 300 → 800), not font-weight keyframes (Latin only; the Thai fallback Prompt is static, so Thai hero headlines get a violet colour sweep instead and Thai index titles step Prompt 200 → 800) - Wrap every animation in prefers-reduced-motion: no-preference and keep the static state fully legible - Split Thai by word, never by character, so vowels and tone marks stay attached ## Don't - Don’t animate body text or anything users must read to act - Don’t run more than two marquees per screen (one outlined band, one slower logo row) - Don’t clip letters with overflow:hidden reveals — it cuts off Thai tone marks - Don’t carry the tight 1.02 headline line-height into Thai: it is for Latin only; with lang=th, hero, h1 and h2 use 1.3 and feature-index titles 1.4 so tone marks and upper vowels never collide ## Audit Passed after 5 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Kinetic Typography" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark ## The style in one line Type is the moving image: headlines reveal letter by letter, weights breathe on a variable font and marquee bands scroll — with a calm static fallback. Design keywords: letter-by-letter reveal, variable font weight wave, scrolling marquee bands, outlined display text, wide display type, dark stage, staggered entrances, reduced-motion fallback. ## Visual language A quiet, near-black stage (#0C0C0D) where only the type moves. A wide variable display face (Unbounded) carries everything: headlines rise in letter by letter with a slight blur and tilt, then the letters pulse between hairline and black weight in a slow travelling wave; a giant outlined copy of the headline scrolls past as a marquee band. Colour is restrained — off-white type, one soft violet (#A391FF) for the key word and active states, coral (#FF6A45) for dots, counters and separators — and controls are soft pills so they never compete with the letters. With reduced motion everything sits still and still reads beautifully. ## Signature details (must be visible) - Letter-by-letter reveal: JS wraps each Latin word in a nowrap span.w and each Latin grapheme in an inline-block span.char (Intl.Segmenter granularity 'grapheme'); Thai is split by word into span.word (granularity 'word'), never by character. Each unit animates from opacity 0, translateY(0.45em) rotate(4deg) blur(6px) to rest over 900ms cubic-bezier(.16,1,.3,1), staggered 32ms per unit - Variable weight wave on the Latin hero headline: @keyframes animating font-variation-settings 'wght' 800 → 220, 2.6s ease-in-out infinite alternate; letter i starts at 1.2s + i × 110ms, i.e. only after its own reveal (i × 32ms + 900ms) has finished. The loop pauses (animation-play-state: running, paused — the one-time reveal always finishes) while the hero is off screen - Thai version of the wave: the Thai fallback Prompt is a static font, so font-variation-settings does nothing on Thai. Thai hero headlines skip the wght wave; instead a violet colour sweep (color #F4F1EA → #A391FF → #F4F1EA, 2.6s ease-in-out, infinite) starts once the reveal has ended — at 1.2s, which is after the 900ms reveal plus the last word's 32ms-per-word stagger for headlines of up to 9 words — with each word a further 110ms later, and keeps looping while the hero is in view. The last word, already violet, stays violet and is excluded from the sweep. Never inject Latin into a Thai headline just to show the wght wave - Outlined text recipe (bands, stat numerals, Latin pull quotes, profile counts): Unbounded is variable, so its overlapping contours show as stray inner strokes under a plain -webkit-text-stroke. Fill with the stage instead of transparent — color #0C0C0D, -webkit-text-stroke 3px #F4F1EA, paint-order: stroke fill, letter-spacing 0 — so only the outer 1.5px of the stroke shows and the internal overlaps are hidden; small mobile outlines use a 2px stroke (1px visible). Never track outlined letters (they merge) - At most two marquees per screen, each built as two identical sibling groups side by side, each group animated translateX(0 → -100%) linear infinite so the second copy slides in seamlessly: (1) one outlined headline band directly under the hero — the hero headline repeated three times per group at clamp(3rem, 7vw, 6rem) Unbounded 800 in the outlined recipe, with coral ✦ separators, between 1px #2C2C31 rules, 40s per loop; (2) one slower logo marquee (60s) moving the opposite way (animation-direction: reverse) with edges faded by a mask-image linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent). Never a third - Feature list as a typographic index of exactly 6 rows: full-width rows split by 1px #2C2C31 rules, a DM Mono '01'–'06' counter in coral, a clamp(1.7rem, 3.6vw, 3rem) Unbounded title at rest weight 300 that swells to 800 in turn (font-variation-settings, 6s ease-in-out infinite; the swell occupies the first 30% of the cycle and peaks at 12%; row n is delayed (n − 1) × 1s, so exactly one row is at its peak at a time) On hover set animation: none on the title (a running animation overrides normal declarations), then font-variation-settings 'wght' 800 (Thai: font-weight 800) and color #A391FF. Thai titles rest at Prompt 200 (base) and step to Prompt 800 between 8% and 24% of the same cycle with a font-weight keyframe and steps(1, end) — the one sanctioned exception to 'no font-weight keyframes', because Prompt is static. Mixed titles (Latin digits + a Thai word, e.g. '40' + the Thai word for 'hours') run both keyframes on the title (animation-timing-function: ease-in-out, steps(1, end)) so the digits swell and the Thai steps. The swell runs only while the list is in view - Landing stats: exactly 4 stats in one row on desktop (wrapping onto further rows on narrow screens), outlined numerals at clamp(2.6rem, 5.2vw, 4.6rem) Unbounded 800 with white-space: nowrap, the first one filled violet #A391FF with no stroke. Compact units attached to the number (k, %, +) stay part of the numeral at the same size; a space-separated word unit (e.g. 'min' in '14 min') is rendered as a separate 1rem DM Mono 500 off-white suffix with no stroke, so a value never wraps. Mobile profile counts are 1.6rem outlined numerals with a 2px stroke, the first one filled violet - Only these may loop: the hero wave (or Thai colour sweep), the outlined marquee band, the logo marquee, and the feature-index swell while the list is in view. JS toggles .is-live on .hero and .index with an IntersectionObserver; while .index.is-live, pause the hero loop (:has(.index.is-live) .hero :is(.char, .word) { animation-play-state: running, paused }). Everything else plays once - Every animation inside @media (prefers-reduced-motion: no-preference). JS may wrap words and graphemes in spans and add classes, but must never hide text: the initial hidden state is applied only under a .kt-ready class on inside prefers-reduced-motion: no-preference, so without JS or with reduced motion all text is visible and static. Scripting: one small inline