Rotating Seal Badge

"use client";

import { useEffect, useId, useRef, useState } from "react";

/**
 * A round seal — "BOOK A TABLE · OPEN DAILY ·" set around a coloured centre
 * mark — that turns slowly in the corner of a hero and is itself the link.
 *
 * THE TEXT FILLS THE CIRCLE EXACTLY. The phrase is repeated as many times as
 * fits, and each repeat is its own run of text pinned to its own slice of the
 * circumference with textLength, so the letters close the loop with no
 * crowding and no gap. The separators are drawn dots placed in the gaps by
 * angle, not a bullet from the font that lands wherever the kerning puts it.
 * If the phrase is too long for the circle, the type shrinks to fit rather
 * than overlapping itself. The ring is laid out from an estimate on the
 * server, then from the real width of the phrase in your font once it has
 * loaded, so a wide display face gets fewer repeats instead of collisions.
 *

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}