Parallel Studio
See Deltaproof
Back to blog
5 min readParallel Studio

Kinetic Typography That Stays Real Text (SEO & Accessibility)

kinetic typographyseoaccessibilitywebflowframertext animation

Most "kinetic type" demos look great in a muted video and fall apart in production. The usual failure mode: the headline becomes a canvas, an SVG outline, or a pile of absolutely positioned spans that search engines and screen readers cannot treat as a normal heading.

You want the opposite. The words should stay real text in the HTML — selectable, searchable, in your h1/h2, read once by assistive tech — while the animation still feels intentional on load, scroll, hover, or click.

That is the design goal behind Kinetic Type: 34 presets as a script tag, React component, and Framer code component, with accessibility built in rather than bolted on.

Why "real text" matters

SEO

Crawlers still prefer text in the document. A hero that exists only as pixels in a <canvas> or as decorative SVG paths does not give you a clean heading hierarchy. Keep the string in the markup; animate a presentation layer around it.

Accessibility

Screen readers should hear the headline once, as one phrase, with heading and link semantics intact. Splitting every letter into a visible DOM node without a careful a11y model often produces letter-by-letter announcements or duplicate content.

Kinetic Type keeps the source text in the page as text. Animated letters are a hidden copy for motion. You can still select and copy the real string. Visitors with Reduce Motion see the final text, still.

Layout stability

Letter animations that change box sizes cause CLS (layout shift). A solid kinetic system measures kerning before the split and animates transforms, opacity, blur, and color — not layout. When a variable-font axis or scramble would change glyph width, the box width stays put. Layout shift stays at zero.

Install with a script tag (any site)

From the download:

  1. Upload kinetic-type.min.js (~13.7 KB gzipped, no dependencies).
  2. Add the script once.
  3. Wrap your text in <pf-kinetic-type>. Keep your heading element around it.
<script src="/kinetic-type.min.js" defer></script>

<h1>
  <pf-kinetic-type preset="mask-rise">Make your words move</pf-kinetic-type>
</h1>

Pick a preset and a trigger, or set split, stagger, easing, and start state as attributes.

Webflow

  1. Paste script/webflow/footer-code.html from the download into Site settings → Custom code → Footer code (or host the .js and add its script tag there).
  2. Add a Code Embed with your tagged text. It inherits surrounding styles.
  3. Publish. Custom code runs on the published site.

Note: Custom code needs a paid Webflow site plan.

Example embed:

<h2>
  <pf-kinetic-type preset="decrypt" trigger="hover">Hover to decrypt</pf-kinetic-type>
</h2>

Framer

  1. Assets → Code → + → New component file, name it KineticType.
  2. Paste framer/KineticType.tsx from the download and save.
  3. Drag it onto the canvas, type your text, pick a font (Framer's font picker is in the panel), a preset, and a trigger. Press Preview.

The canvas shows still text by default so the editor stays fast; set On Canvas to Live to preview motion there. This is the any-site pack — related to the Kinetic Type Framer plugin, but built for script/React/Framer with scroll scrubbing, hover, click, loop, and code triggers.

React / Next.js

import KineticType from "./KineticType"

<KineticType as="h1" preset="mask-rise" trigger="load">
  Make your words move
</KineticType>

On Next.js the server renders the text as real HTML in your tag; it animates in the browser. Use as="h1" (or h2, etc.) so semantics stay correct.

WordPress and Shopify (same idea)

  • WordPress: upload the .js, Custom HTML block with the script tag and <pf-kinetic-type> around your words (plan must allow custom code on WordPress.com).
  • Shopify: upload to Theme Assets, Custom Liquid with asset_url for the script and your tagged headline.

Fonts and variable axes

The effect inherits your page font, size, color, and letter-spacing. For a one-off face, point font-url at a font file. Variable fonts can animate weight, width, slant, optical size, or custom axes — still as real text in the document.

When not to use kinetic type

  • Body copy longer than a short paragraph (motion fatigue; keep animation on headlines and short lines).
  • Critical legal or form labels (clarity beats flourish).
  • Pages where every heading already fights for attention — one strong kinetic line beats five competing ones.

See it in context

Kinetic Type sits alongside the other Parallel Studio web effects on /effects. Open the Kinetic Type page for live presets (mask rise, decrypt, blur reveal, highlight, and more).

Pricing

The bar for shipping kinetic headlines in 2026 is not "does it look cool in a screen recording." It is whether the text remains text for search, for assistive tech, and for copy-paste — while still moving when you want it to. Start with a script tag, wrap one h1, publish, and check the page source: your words should still be there.