RandomLetterSwap

Randomised letter swap. Two hover.

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

Randomised letter swap. Two hover.