Circular text

import { useId } from 'react';

const R = 74;
// A full circle as two arcs, starting at 9 o'clock and running clockwise.
const CIRCLE = `M ${100 - R},100 a ${R},${R} 0 1,1 ${R * 2},0 a ${R},${R} 0 1,1 -${R * 2},0`;

type ScrollBadgeProps = { text?: string; onClick: () => void };

export function ScrollBadge({
  text = 'Scroll down • Scroll down • ',
  onClick
}: ScrollBadgeProps) {
  const id = useId();

  return (
    <div className='relative grid size-50 place-items-center'>
      {/* Only the ring spins; the button in the middle stays upright. */}
      <svg
        aria-hidden
        viewBox='0 0 200 200'
        className='absolute inset-0 size-full animate-[spin_14s_linear_infinite] motion-reduce:animate-none'
      >
        <path id={id} d={CIRCLE} fill='none' />
        {/* whitespace-pre keeps the trailing space, which SVG drops by default. */}
        <text className='fill-current text-[17px] font-semibold whitespace-pre uppercase'>
          {/* textLength spreads the letters over the whole circumference. */}
          <textPath href={`#${id}`} textLength={2 * Math.PI * R} lengthAdjust='spacing'>
            {text}
          </textPath>
        </text>
      </svg>
      <button
        type='button'
        aria-label='Scroll down'
        onClick={onClick}
        className='grid size-20 place-items-center rounded-full bg-black text-2xl text-white'
      >
        ↓
      </button>
    </div>
  );
}