A kinetic typography website: moving type that stays readable
Kinetic type works on the web when the motion has a beginning and an end and the words are readable when it stops. Animate with transforms and opacity so nothing else on the page moves, keep loops pausable, and give everyone who has asked their device for less motion a still version that says the same thing.
From title sequences to the browser
Kinetic typography, type that moves to carry meaning, has its roots in film title sequences. Saul Bass's openings for Hitchcock films in the late 1950s are the usual reference: words that slide, split and assemble in time with the music, setting the mood before the first scene. Television idents, music videos and later motion graphics software made it common. On the web it arrived in two waves: Flash-era intros that visitors learned to skip, and modern CSS and variable fonts, which make it possible to animate type that is still real, selectable text.
The difference from film matters. A title sequence plays once to a seated audience. A website is read at the visitor's pace, sometimes by a screen reader, sometimes with a magnifier, often in a hurry. Moving text on a website has to accept that.
Kinds of animated typography on the web
| Pattern | Works for | Main risk |
|---|---|---|
| Entrance (words rise or fade in once) | Hero headlines, section openings | Text invisible if the animation fails or is slow |
| Scroll-linked (type moves with scroll) | Big statements in a story | Motion tied to scrolling can trigger vestibular symptoms |
| Marquee (a line scrolls sideways) | Event names, lists of artists or clients | Unreadable to many, and never stops |
| Variable-font morph (weight or width changes) | Logos, hover states, a single headline | Reflow if the width change pushes other text |
| Split and stagger (letters animate separately) | Short display words | Screen readers may read letters one by one |
Text animation CSS that doesn't break the page
- Animate transform and opacity only. Moving type with
translateandscaledoesn't change the layout, so nothing else jumps. web.dev's guide to Cumulative Layout Shift recommends transforms over changing size or position properties for exactly this reason. - Reserve the space. The headline's final size should be laid out from the start, so the animation happens inside a box that doesn't grow.
- Start from visible. Write the animation so the resting state is the readable one. If script or the animation fails, the text should still be there.
- Keep entrances short. Around half a second to a second, staggered by tens of milliseconds, not seconds. See UI animation duration.
- Split letters for screen readers carefully. Put the full word in an accessible label and hide the split pieces from assistive technology, or animate whole words instead.
- Use a real easing curve, not the default
ease; see easing curves for UI animation.
Moving text and accessibility
Two WCAG criteria apply directly. Pause, Stop, Hide, at level A, says anything that moves automatically for more than five seconds alongside other content needs a way to pause, stop or hide it. That rules out an endless marquee with no control. Animation from Interactions, at AAA, asks that motion triggered by the visitor, such as scroll-linked type, can be turned off unless it's essential, and notes that such motion can cause dizziness and nausea for people with vestibular disorders.
The practical answer is the prefers-reduced-motion media query. Under reduce, show the type at rest, or replace movement with a simple fade. A marquee becomes a static line or a wrapped list. Scroll-linked type sits in its final position. See prefers-reduced-motion for patterns.
When a kinetic typography website is the right call
Moving type earns its place for conferences, festivals, film and music releases, studios and campaigns: places where the type is the brand and the visit is short. It works less well for services people use repeatedly. A bakery's opening hours shouldn't wait for an animation.
Kinetic type in Anticode
FORM/26, a design conference site in Anticode's template gallery, uses kinetic type. Like every template it's an app build designed and written by Anticode's model rather than a page in one of the seven design systems, and using it copies it into your project. A kinetic typography site of your own in a similar style would be an app build too, since the model writes its animation code.
Since 23 October 2026 the publish gate requires reduced-motion support: any page or app that animates must turn the animation down under prefers-reduced-motion, or it can't be published. Design-engine pages animate their hero text in with a short rise and switch all animation off when the visitor asks for less motion. The Critic also flags default ease timing curves.
Questions people ask
Does animated text hurt SEO or accessibility?
Not if it's real text in the HTML, visible at rest, and still for people who ask for reduced motion. Text drawn into video or canvas is the problem.
Is a scrolling marquee accessible?
Only with a way to pause it, and with a static version under reduced motion. An endless marquee fails WCAG's Pause, Stop, Hide.
How long should a text animation last?
Entrances of about half a second to a second. Anything that keeps the reader waiting longer is too slow.