Random Letter Swap

Text 363

About

A text component that randomly 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. 2. Ping Pong animation — plays the animation timeline in a ping pong fashion.

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

Code

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

Usage.tsx

'use client'

import { RandomLetterSwapForward, RandomLetterSwapPingPong } from "@/components/ui/random-letter-swap"

function BasicExample() {
  return (
    <div className="w-full h-full rounded-lg bg-white text-3xl md:text-5xl flex flex-col items-center justify-center font-overusedGrotesk">
      <div className="h-full text-red-500 rounded-xl py-12 align-text-center gap-y-1 md:gap-y-2 flex flex-col justify-center items-center">
        <RandomLetterSwapForward
          label="Right here!"
          reverse={true}
        />
        <RandomLetterSwapForward
          label="Right now!"
          reverse={false}
          className="font-bold italic px-4"
        />
        <RandomLetterSwapPingPong 
          label="Right here!" 
        />
        <RandomLetterSwapPingPong
          label="Right now!"
          reverse={false}
          className="font-bold"
        />
      </div>
    </div>
  )
}

function CustomStylesExample() {
  return (
    <div className="w-full h-full rounded-lg bg-slate-900 text-2xl md:text-4xl flex flex-col items-center justify-center">
      <div className="space-y-4 text-white">
        <RandomLetterSwapForward
          label="Hover me!"
          className="font-mono"
        />
        <RandomLetterSwapPingPong
          label="Or me!"
          className="font-serif italic"
        />
      </div>
    </div>
  )
}

function TimingExample() {
  return (
    <div className="w-full h-full rounded-lg bg-white text-2xl md:text-4xl flex flex-col items-center justify-center gap-6">
      <RandomLetterSwapForward
        label="Fast Animation"
        transition={{ type: "spring", duration: 0.3 }}
        staggerDuration={0.01}
      />
      <RandomLetterSwapPingPong
        label="Slow Animation"
        transition={{ type: "spring", duration: 1.2 }}
        staggerDuration={0.05}
      />
    </div>
  )
}

function DirectionExample() {
  return (
    <div className="w-full h-full rounded-lg bg-black text-2xl md:text-4xl flex flex-col items-center justify-center gap-6 text-white">
      <RandomLetterSwapForward
        label="Up to Down"
        reverse={true}
      />
      <RandomLetterSwapForward
        label="Down to Up"
        reverse={false}
      />
    </div>
  )
}

export {
  BasicExample,
  CustomStylesExample,
  TimingExample,
  DirectionExample
}