---
title: "KineticTextFlow — Free Framer component · Best of Framer"
description: "Free Framer component · by Nirav Jivani · Text. KineticTextFlow turns any headline into an interactive centerpiece."
canonical: "https://framer.elliotli.dev/component/kinetictextflow"
---

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

# KineticTextFlow

Cinematic interactive hover effect

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

![KineticTextFlow preview image 1](https://framer.elliotli.dev/og/component/kinetictextflow/c6bcf425d6490306/1600x1200.jpg)

## Summary

KineticTextFlow turns any headline into an interactive centerpiece.

## Description

**KineticTextFlow** turns any headline into an interactive centerpiece. Letters launch into view with a **staggered**, **physics-driven reveal**, then **react in real time** as the **cursor moves pushing away with spring-loaded bounce**, **trailing motion blur**, **subtle 3D tilt**, and a warm color shift under the cursor. A soft cursor glow and ghost trail add a cinematic, high-energy finish.

Perfect for hero sections, landing pages, portfolios, and anywhere you want the header to feel alive. Drop it in, set your text, and publish no code required.

**Features**

-   **Cursor repulsion with spring & bounce physics**
    
-   Cinematic staggered reveal on load
    
-   Ghost motion trails + custom cursor glow
    
-   3D tilt, motion blur & dynamic color shift
    
-   Lightweight, canvas-based, runs smoothly
    

kinetic text hover, hover effect, interactive text, mouse repel, magnetic text, text animation, cursor effect, hero text, animated headline

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

-   All · #4282

## Details

- **Author**: Nirav Jivani
- **Published**: 2026-07-02
- **Updated**: 2026-07-02
- **Added**: 2026-07-02
- **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