Letter Swap

On hover, each letter scrambles through random characters before revealing the real letter. Configurable speed.

Hover me →

Code

import { LetterSwap } from "@/components/ui/letter-swap"

export default function Example() {
  return (
    <LetterSwap text="Hover to scramble" className="text-2xl font-bold cursor-pointer" />
  )
}

Installation

$npx particleui-cli add letter-swap

Usage

TSX

import { LetterSwap } from "@/components/ui/letter-swap"

export default function Example() {
  return (
    <LetterSwap text="Hover to scramble" className="text-2xl font-bold cursor-pointer" />
  )
}

Props

Prop	Type	Default	Required
text	string	—	yes
className	string	—	no
speed	number	`50`	no

Details

Source filecomponents/ui/letter-swap.tsx

Typeui

Categoriestext, particles

npm dependencies

Registry deps

Claude skill—