Animation

Letter swap

3D hover letter flip

Client · Motion

Live preview

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

Loading preview…

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

Run the CLI to copy files into your project. Pick your language and styling below — the command updates automatically.

1. Add via CLI (recommended)

LanguageStylingInstall

npx @shashank-portfolio/cli add letter-swap

npx @shashank-portfolio/cli add letter-swap

2. Install dependencies

npm install motion

npm install motion

Required packages

motion ^12.0.0

3. Copy from repo

# Files in this portfolio repo:
packages/cli/registry/letter-swap/

# Files in this portfolio repo:
packages/cli/registry/letter-swap/

4. 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>
  );
}

Add to your project

Loading install instructions…

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 ❤️