Animation

Letter swap

3D hover letter flip

Client · Motion

Live preview

Interact with the component below — same behavior as on the About page.

Summary

A text hover effect that splits copy into individual characters and flips each one in 3D on pointer enter. Letters animate in with a left-to-right stagger and unwind in reverse on mouse leave. Supports alternate swap text, per-face styling, keyboard toggle, and prefers-reduced-motion.

Per-character rotateX flip with perspective
Staggered in/out with reverse delay on leave
Optional swapText for alternate back-face copy
Keyboard focus and reduced-motion safe

Add to your project

Install peer dependencies, then add the files with the CLI or copy them manually from this repo. Follow the usage example below for imports and markup.

1. Install dependencies

npm install motion

npm install motion

Required packages

motion ^12.0.0

2. Copy from repo

# Files in this portfolio repo:
components/ui/letter-swap.tsx

# Files in this portfolio repo:
components/ui/letter-swap.tsx

3. Use in your app

"use client";

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

export function AboutHeading() {
  return (
    <h1 className="font-serif text-3xl">
      Hello! I&apos;m{" "}
      <LetterSwap
        text="Shashank"
        swapText="Shashank"
        className="border-b border-foreground/30 pb-0.5"
        backClassName="italic text-foreground/85"
      />
      .
    </h1>
  );
}

"use client";

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

export function AboutHeading() {
  return (
    <h1 className="font-serif text-3xl">
      Hello! I&apos;m{" "}
      <LetterSwap
        text="Shashank"
        swapText="Shashank"
        className="border-b border-foreground/30 pb-0.5"
        backClassName="italic text-foreground/85"
      />
      .
    </h1>
  );
}

Let’s connect

I’m always open to discussing new projects, creative ideas, or opportunities to be part of your visions. Just reach out!

See projects

By Love ❤️