Add playful interactivity to links, headers, or buttons with Letter Swap. This component smoothly swaps characters on hover, creating a satisfying "slot machine" style motion that draws attention.
Staggered Animation Letters animate one by one (staggered) for a fluid, wave-like motion rather than a stiff, uniform movement.
2 Interaction Modes
Forward: The swap happens once on hover and resets instantly (good for links).
PingPong: The swap reverses when the mouse leaves (good for buttons).
Full Customization Control the stagger direction (first-to-last, center-out), animation speed, spring physics, and of course, any font family and style.
Navigation Links — Add subtle micro-interactions to your site navigation that encourage exploration.
Call-to-Action Buttons — Draw attention to important buttons with playful text effects that feel premium.
Hero Headlines — Create memorable first impressions with animated headings that engage visitors.
Portfolio Titles — Showcase creativity with dynamic text effects that reflect your design aesthetic.
Letter Swap provides intuitive controls for complete customization:
Text & Animation
Text: Enter your content directly
Variant: Choose between Forward (one-shot) or PingPong (toggle on hover)
Direction: Control whether letters animate up or down
Timing Controls
Spring Duration: Adjust the animation bounciness (0.1 - 2.0s)
Stagger Duration: Fine-tune the delay between each letter
Stagger From: Start animation from first letter, last letter, or center
Typography
Full font control via Framer's extended font picker
Color picker for text styling
Best for Buttons — Use PingPong mode for interactive buttons where the effect should reverse on mouse leave.
Create Wave Effects — Set Stagger From to "Center" for an outward wave animation that expands from the middle.
Subtle is Better — Start with default stagger (0.03s) for smooth motion. Higher values create more dramatic, typewriter-like effects.
Spring Physics — Lower spring values (0.4-0.6) feel snappy and modern, while higher values (0.8-1.0) add playful bounce.
Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.
Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!
Letter Swap transforms static text into an interactive experience. The staggered animation creates a premium, polished feel that impresses clients and engages visitors. With two animation modes and full customization, you can use it anywhere—from subtle navigation links to bold hero headlines. No code required, just drop it in and customize through the Framer properties panel.
FramerHub.io 
