---
title: "Particle Text Hover — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Omakase Design · Text. Particle Text Scrambler Hover Effect"
canonical: "https://framer.elliotli.dev/component/particle-text-hover"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Particle Text Hover

# Particle Text Hover

Particle Text Scrambler Hover Effect

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

![Particle Text Hover preview image 1](https://framer.elliotli.dev/og/component/particle-text-hover/4a1c1b7b5cae3f25/1600x1200.jpg)

## Summary

Particle Text Scrambler Hover Effect

## Description

Transform your typography into an interactive highlight with this **particle text scrambler hover** component for Framer. On hover, your text breaks into particles and scrambles before snapping back cleanly, adding a premium micro-interaction that instantly makes your UI feel more alive.

## Key Features

-   Particle-style text scramble animation on hover
    
-   Smooth return to the original text after hover out
    
-   Fully customizable text (type anything)
    
-   Customize font, size, weight, letter spacing using Framer font controls
    
-   Control animation speed and intensity
    
-   Works on buttons, headings, links, and CTA text
    
-   Responsive and lightweight
    
-   Zero configuration needed, works out of the box
    

## Perfect For

-   Hero headings and taglines
    
-   CTA buttons and links
    
-   Portfolio and agency sites
    
-   SaaS marketing pages
    
-   Any site that needs premium micro-interactions
    

## What You Get (After Purchase)

-   Text Particle Scrambler Hover Component URL
    
-   Coupon for 25% off on yearly Pro plan
    
-   Lifetime Email Support
    

## Quick Setup

1.  Drag the component onto your Framer canvas
    
2.  Replace the text with your own label
    
3.  Set typography in the Framer font panel
    
4.  Adjust speed and intensity
    
5.  Publish ✅
    

## Customization Options

✓ Text content✓ Typography (Framer font controls)✓ Particle density and scramble intensity✓ Animation speed✓ Hover sensitivity✓ Text color and blend feel✓ Optional background styling

## How It Works

-   Hover triggers a scramble plus particle dispersion effect
    
-   Characters animate and re-form into the original text
    
-   On hover out, the component returns smoothly to the default state
    

## Technical Details

-   Built for Framer with smooth, performant animation
    
-   Hardware-accelerated motion for clean hover behavior
    
-   Responsive sizing and layout friendly
    

Need Complete Site Templates?If you like clean, premium interactions, you’ll find more templates and components at [https://omakase.com/templates](https://omakase.com/templates).

SupportNeed help setting it up? Email us at [tech@oma-kase.com](mailto:tech@oma-kase.com)

## Refund Policy

Due to the nature of digital products, we do not offer refunds once a purchase is made.

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

-   All · #5174

## Details

- **Author**: Omakase Design
- **Price**: $3.00
- **Published**: 2026-05-11
- **Updated**: 2026-05-11
- **Added**: 2026-04-21
- **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