Shimmer Text

// Keyframes cannot be expressed as Tailwind utilities, so they live in a style element.
const css = `
@keyframes shimmer-text-sweep {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
`;

// The gradient is painted through the glyphs, so the base #8a887f gray is
// the text colour and only the pale band moving through it reads as light.
const shimmerStyle: React.CSSProperties = {
  background: 'linear-gradient(110deg, #8a887f 35%, #ece9e2 50%, #8a887f 65%)',
  backgroundSize: '200% 100%',
  WebkitBackgroundClip: 'text',
  backgroundClip: 'text',
  color: 'transparent',
  animation: 'shimmer-text-sweep 2.5s linear infinite',
};

export function ShimmerText({ children = 'Shimmer' }: { children?: React.ReactNode }) {
  return (
    <span style={shimmerStyle} className="inline-block text-[32px] font-bold">
      <style>{css}</style>
      {children}
    </span>
  );
}