---
title: "Motion Field — Framer component · Best of Framer"
description: "$7.00 · Framer component · by DariStudio · Text. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/motion-field"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Motion Field

# Motion Field

Cursor-reactive typography

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

![Motion Field preview image 1](https://framer.elliotli.dev/og/component/motion-field/095b7b37613995f7/1600x1200.jpg)

## Summary

motion field.

## Description

## Motion Field

Motion Field is an interactive typography component that turns any heading into a responsive motion field. Each letter reacts individually to the cursor through movement, rotation, scaling, and color changes.

Choose between Push, Pull, and Swirl modes. Customize the text, typography, colors, radius, strength, scale, rotation, smoothness, falloff, alignment, and padding directly from the Framer panel.

Perfect for hero sections, portfolios, agency websites, campaigns, event pages, and experimental editorial layouts.

### Key features

-   Push, Pull, and Swirl modes
    
-   Individual letter interaction
    
-   Speed-sensitive movement
    
-   Full typography controls
    
-   Custom colors and background
    
-   Multi-line text support
    
-   Responsive layout
    
-   Static Canvas and Export preview
    
-   Reduced motion support
    

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

-   All · #7312

## Details

- **Author**: DariStudio
- **Price**: $7.00
- **Published**: 2026-07-28
- **Updated**: 2026-07-28
- **Added**: 2026-07-28
- **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