Letter Swap

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.

Text Hover Stagger Motion Interactive