Letter Swap

Letter Swap

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.

Features

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.

Use Cases

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.

Customization

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

Quick Tips

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.

License

Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

Refund Policy

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!

Why Designers Love This

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.