3D text flip

import { useState } from 'react';
import { motion, useReducedMotion } from 'motion/react';

const STAGGER = 0.03; // seconds between letters
const EASE = [0.23, 1, 0.32, 1] as const;

type RowProps = { text: string; shown: boolean; away: number; className?: string };

function Row({ text, shown, away, className }: RowProps) {
  const reduceMotion = useReducedMotion();
  return (
    <span aria-hidden className={`flex [grid-area:1/1] ${className ?? ''}`}>
      {[...text].map((char, i) => (
        <motion.span
          key={i}
          className='inline-block backface-hidden'
          // Pivot half an em behind the text, so the faces turn like a box.
          style={{ transformOrigin: '50% 50% -0.5em', transformPerspective: 600 }}
          initial={false}
          animate={{ rotateX: shown ? 0 : away }}
          transition={
            reduceMotion
              ? { duration: 0 }
              : { duration: 0.5, ease: EASE, delay: i * STAGGER }
          }
        >
          {char === ' ' ? '\u00A0' : char}
        </motion.span>
      ))}
    </span>
  );
}

type FlipLinkProps = { href: string; label: string; hoverLabel: string };

export function FlipLink({ href, label, hoverLabel }: FlipLinkProps) {
  const [flipped, setFlipped] = useState(false);

  return (
    <a
      href={href}
      onPointerEnter={() => setFlipped(true)}
      onPointerLeave={() => setFlipped(false)}
      onFocus={() => setFlipped(true)}
      onBlur={() => setFlipped(false)}
      className='inline-grid text-5xl font-semibold tracking-tight'
    >
      <span className='sr-only'>{label}</span>
      {/* Front letters roll up and away; back letters roll up from below. */}
      <Row text={label} shown={!flipped} away={90} />
      <Row text={hoverLabel} shown={flipped} away={-90} className='text-blue-600' />
    </a>
  );
}