motion

Kinetic Type

Shape your words with Wave, Scatter, and Elastic motion. Adjust intensity, replay, or return to a readable still state.

How to play

Choose Wave, Scatter, or Elastic, enter up to 80 Unicode characters, and adjust intensity. Press Play or Replay to apply your changes. Reset restores the original text, Wave, and intensity 50%.

Typography playground

001 / KINETIC TYPE

WHERE LOGIC MEETS CHAOS.

JavaScript is required for the interactive controls. The example above remains readable without it.

Experiment controls
Animation preset

0 keeps the text still. Motion stays inside the stage.

Up to 80 characters, including Unicode and emoji. Press Play to apply changes.

24 / 80

A readable example is ready.

Each animation plays once and settles. Longer text uses smaller movement to stay inside the stage.

With reduced motion or intensity 0, Apply text updates the stage without translation or elastic effects. A complete readable example and navigation remain available without JavaScript.

Behind the pixels

Astro · TypeScript · GSAP · Intl.Segmenter