---
title: "TextParticleOnHover — Free Framer component · Best of Framer"
description: "Free Framer component · by WEB WE DO · Text. TextParticleOnHover Where to use it?"
canonical: "https://framer.elliotli.dev/component/textparticleonhover"
---

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

# TextParticleOnHover

Interactive text particle on hover

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

![TextParticleOnHover preview image 1](https://framer.elliotli.dev/og/component/textparticleonhover/501d4da44743be74/1600x1200.jpg)

## Summary

TextParticleOnHover Where to use it?

## Description

## TextParticleOnHover

### Where to use it?

Use it for hero sections, landing pages, portfolio headers, or anywhere you want a striking interactive moment. It works well as a full-width banner or a contained element within a card or section.

**Properties**

-   **Text** sets the display string.
    
-   **Color 1–4** define a linear gradient across the text — pick any four colors to match your brand.
    
-   **Particle Density** (1–10) controls the spacing between dots: lower values produce a denser, crisper look while higher values feel lighter and more abstract.
    
-   Animation Force (10–200) determines how strongly particles push away from the cursor.
    
    ![TextParticleOnHover Params](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-3qfxzlxy-8J8V3QJg2ybLyVCJZHG5tI4vxFaSWx)TextParticleOnHover Params

### Contact

Email: [office@webwedo.eu](mailto:office@webwedo.eu)

Website: https://webwedo.eu

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

-   All · #6018

## Details

- **Author**: WEB WE DO
- **Published**: 2026-03-13
- **Updated**: 2026-04-28
- **Added**: 2026-03-06
- **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