---
title: "Kinetic Text — Free Framer component · Best of Framer"
description: "Free Framer component · by John Valentine · Text. Kinetic Text turns headlines into living type."
canonical: "https://framer.elliotli.dev/component/kinetic-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Kinetic Text

# Kinetic Text

[View on Framer](https://framer.com/marketplace/components/kinetic-text/?via=elliot-li)

![Kinetic Text preview image 1](https://framer.elliotli.dev/og/component/kinetic-text/dab330370786040d/1600x1200.jpg)

## Summary

Kinetic Text turns headlines into living type.

## Description

**Kinetic Text** turns headlines into living type. It fragments your text into letters or words, animates them independently, and then reforms the phrase with premium, staggered motion. Use it for hero lines, section headers, or short statements that need to land with energy—without writing a line of code.

✨ Features & Capabilities

-   **Animation Modes** – _Explode & Reform_, _Wave_, _Scramble & Resolve_.
    
-   **Triggers** – Start on _scroll into view_, _hover_, or _page load_.
    
-   **Granularity** – Animate by **letters** or **words** (toggle).
    
-   **Timing & Physics** – Controls for speed, delay/stagger, easing, and repetition (once/loop).
    
-   **Scatter Control** – Set max translation/rotation distance for the explode/scramble effects.
    
-   **Color Transitions** – Optional from→to color for animated emphasis.
    
-   **Typography Controls** – Font, weight, size, line-height, tracking, case, alignment, and max width.
    
-   **Layout-Safe** – Preserves spacing and reflows cleanly; no layout jump.
    
-   **Accessibility** – Screen readers read the **full phrase**; decorative spans are aria-hidden.
    
-   **Reduced Motion** – Honors prefers-reduced-motion (falls back to subtle fade).
    
-   **Performance** – GPU transforms only; lightweight and responsive.
    

🧩 Property Controls

-   **Text** (headline / short phrase)
    
-   **Animate By**: Letters | Words
    
-   **Animation Type**: Explode, Wave, Scramble
    
-   **Trigger**: Scroll | Hover | Load
    
-   **Speed** (ms), **Stagger** (ms), **Easing**
    
-   **Scatter Distance** (px/deg)
    
-   **Color From / To** (optional)
    
-   **Repeat**: Once | Loop
    
-   **Typography**: Font, Weight, Size, Line Height, Tracking, Align, Case, Max Width
    

💡 Use Cases

Hero headlines • Section intros • Launch callouts • Portfolio titles • Data/story transitions

## Rank history [How rankings work →](/terms#rankings)

-   All · #6000

## Details

- **Author**: John Valentine
- **Published**: 2025-11-27
- **Updated**: 2025-11-26
- **Added**: 2025-10-04
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing