Kinetic Type · animated text for any website · v1.0

1. 1

   Upload kinetic-type.min.js from the download to your site.

2. 2

   Add the script once, and wrap any text in a <pf-kinetic-type> tag. Keep your heading around it.

3. 3

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

<script src="/kinetic-type.min.js" defer></script>

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

1. 1

   Paste script/webflow/footer-code.html from the download into Site settings → Custom code → Footer code (or host the .js file and add its script tag there).

2. 2

   Add a Code Embed element with your tag where you want the text. It takes the styles around it.

3. 3

   Publish. Custom code runs on the published site.

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

Custom code needs a paid Webflow site plan.

1. 1

   Upload kinetic-type.min.js to your Media library or your theme, and copy its URL.

2. 2

   Add a Custom HTML block with the script tag and your text in a <pf-kinetic-type> tag.

<script src="https://your-site.com/wp-content/uploads/kinetic-type.min.js" defer></script>
<h2><pf-kinetic-type preset="blur-reveal">Your headline</pf-kinetic-type></h2>

On WordPress.com, you need a plan that allows custom code.

1. 1

   Online Store → Themes → Edit code → Assets: upload kinetic-type.min.js.

2. 2

   In the theme editor, add a Custom Liquid section with the script and your text.

<script src="{{ 'kinetic-type.min.js' | asset_url }}" defer></script>
<h2><pf-kinetic-type preset="highlight" split="words">New season, new colors</pf-kinetic-type></h2>

1. 1

   Copy react/KineticType.tsx into your project. It needs only React 18+.

2. 2

   Render it with the tag you want (as="h1") and a preset. The text is its children.

import KineticType from "./KineticType"

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

Next.js: the server renders the text as real HTML in your tag; it animates in the browser before the first paint.

1. 1

   In your Framer project, go to Assets → Code → + → New component file, and name it KineticType.

2. 2

   Replace the file's contents with framer/KineticType.tsx from the download, and save.

3. 3

   Drag KineticType onto the canvas, type your text, pick a font, a preset (or Custom) and a trigger, and press Preview.

On the Framer canvas you see the text still, which keeps the editor fast. Set On Canvas to Live to see it move there.