RandomLetterSwap

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