Digit Swap

Component

About

A text component that renders numbers or masked strings in fixed-width character slots and rolls each glyph into place when the value changes, useful for animated card numbers, prices, or counters.

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

Code

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

Usage.tsx

"use client";

import DigitSwap from "@/components/ui/digit-swap";
import { useState } from "react";

const CARD_NUMBER = "4242 4242 4242 0806";
const MASKED_NUMBER = "•••• •••• •••• 0806";

export default function DigitSwapDemo() {
  const [revealed, setRevealed] = useState(false);

  return (
    <div className="flex w-80 flex-col gap-5">
      <div className="flex flex-col gap-2">
        <span className="text-xs font-medium text-muted-foreground">
          Card number
        </span>
        <DigitSwap
          value={revealed ? CARD_NUMBER : MASKED_NUMBER}
          animationKey={revealed ? "revealed" : "masked"}
          direction={revealed ? "up" : "down"}
          suffixLength={4}
          glyphClassName={
            revealed ? "text-foreground" : "text-muted-foreground"
          }
          suffixClassName="text-foreground"
          className="font-mono text-lg tracking-[0.08em] tabular-nums"
        />
      </div>

      <button
        type="button"
        aria-label={revealed ? "Animate masked number" : "Animate card number"}
        aria-pressed={revealed}
        onClick={() => setRevealed((current) => !current)}
        className="h-10 self-start rounded-lg border border-border px-3 text-sm font-medium text-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
      >
        Animate
      </button>
    </div>
  );
}