---
title: "RandomLetterSwap — Free Framer component · Best of Framer"
description: "Free Framer component · by Anamika Yadav · Text. Randomised letter swap. Two hover."
canonical: "https://framer.elliotli.dev/component/randomletterswap"
---

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

# RandomLetterSwap

Randomised letter swap. Two hover.

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

![RandomLetterSwap preview image 1](https://framer.elliotli.dev/og/component/randomletterswap/b65f87fe517fa7b5/1600x1200.jpg)

## Summary

Randomised letter swap. Two hover.

## Description

**Random Letter Swap brings your typography to life with a smooth, randomised letter animation on hover or click. Each character flies out in a shuffled order and returns with spring physics — creating a tactile, editorial feel that works on navlinks, headings, CTAs, and buttons.**

**Two animation variants**

**→ Forward — letters exit randomly then silently reset. Ideal for navigation items and hero headlines that need to feel alive without being distracting.**

**→ Ping Pong — letters fly out on hover and return when the cursor leaves. Perfect for buttons and interactive labels where you want a clear hover state.**

**Everything is editable from the panel**

**→ Spring preset — Gentle, Snappy, Bouncy, or Custom (stiffness + damping)**

**→ Stagger — control the delay between each letter (0 – 200ms)**

**→ Direction — Up or Down**

**→ Trigger — Hover or Click**

**→ Primary color + Hover color (ghost letter can be a different color)**

**→ Font family, size, weight, tracking, line height, text transform**

**→ HTML tag — span, p, h1, h2, h3, or div**

**→ Optional link URL with new tab toggle**

**Built right**

**→ Canvas-safe — no animation flickers in the Framer editor**

**→ Screen-reader accessible (hidden aria label on every instance)**

**→ No external dependencies — works out of the box**

**→ Single file, clean TypeScript**

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

-   All · #6490

## Details

- **Author**: Anamika Yadav
- **Published**: 2026-06-05
- **Updated**: 2026-07-22
- **Added**: 2026-06-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