Random Letter Swap
0
Used by 0Controls
Random Letter Swap
Swap each letter of a heading vertically on hover, revealing a duplicate glyph in a randomized, staggered order.
KEY FEATURES
- — Randomized per-hover shuffle of the letter swap order
- — Forward play-once and ping-pong hover modes
- — Reverse toggle for upward or downward swap direction
- — Adjustable stagger delay between letters
- — Spring-based transition easing control
- — Full Framer font control with size, weight, and spacing
- — Custom text color control
- — Debounced hover handling that settles rapid enter/leave thrashing
- — Accessible with screen-reader label and aria-hidden letter spans
- — Static-render safe resting state for canvas and export
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
label
string
LETTER SWAP
The heading text that is split into letters and swapped on hover.
mode
enum
pingpong
Swap behavior: forward plays once on hover, pingpong reverses on hover-out.
reverse
boolean
false
Swap direction: on slides letters up, off slides them down.
font
font
{"..."}
Font family, weight, size, spacing, and alignment of the text.
ease
transition
{"..."}
Motion transition (spring) applied to each letter's swap.
ANIMATION
PROP
TYPE
DEFAULT
DESCRIPTION
staggerDuration
number
0.1
Seconds of delay between each letter's swap; higher spreads it out.
COLORS
PROP
TYPE
DEFAULT
DESCRIPTION
color
color
#FFFFFF
Color of the letters and their swapped duplicates.
