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