Letter Swap

Text 425

About

A text component that swaps the letters vertically on hover. There are two types of animations available for this component: 1) Forward animation — plays the animation timeline once forward, when you hover over the text. 2) Ping Pong animation — plays the animation timeline in a ping pong fashion. It plays once forward when you hover over the text, and once in the opposite direction when you hover away from the text.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Letter Swap to your project and fits it to your theme.

Code

How Letter Swap is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client'

import { LetterSwapForward, LetterSwapPingPong } from "@/components/ui/letter-swap"

function AllFeaturesExample() {
  return (
    <div className="w-full h-full rounded-lg text-xl md:text-3xl flex flex-col items-center justify-center font-calendas">
      <div className="p-12 text-[#0015ff] rounded-xl align-text-top gap-y-1 md:gap-y-2 flex flex-col">
        <LetterSwapForward
          label="Hover me chief!"
          reverse={true}
          className="italic"
        />
        <LetterSwapForward
          label="{awesome}"
          reverse={false}
          className="font-bold"
        />
        <LetterSwapForward
          label="Good day!"
          staggerFrom={"center"}
          className="mono"
        />
        <LetterSwapPingPong
          label="More text?"
          staggerFrom={"center"}
          reverse={false}
          className="font-overusedGrotesk font-bold"
        />
        <LetterSwapPingPong 
          label="oh, seriously?!" 
          staggerFrom={"last"} 
        />
      </div>
    </div>
  )
}

function StaggerDirectionsExample() {
  return (
    <div className="w-full h-full text-3xl flex md:flex-row flex-col items-center justify-center font-calendas gap-x-12 gap-y-4 text-[#0015ff]">
      <LetterSwapForward label="First" staggerFrom={"first"} />
      <LetterSwapForward label="Center" staggerFrom={"center"} />
      <LetterSwapForward label="Last" staggerFrom={"last"} />
    </div>
  )
}

function InstantAnimationExample() {
  return (
    <div className="w-full h-full min-h-[500px] text-3xl flex flex-row gap-12 items-center justify-center font-calendas bg-[#0015ff]">
      <div className="items-center justify-center grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-12 text-white">
        <LetterSwapForward label="oh, wow!" staggerDuration={0} />
        <LetterSwapForward label="nice!" staggerDuration={0} reverse={false} />
      </div>
    </div>
  )
}

export {
  AllFeaturesExample,
  StaggerDirectionsExample,
  InstantAnimationExample
}