文字时钟

// 纯 Tailwind CSS，无需额外依赖
const chars = "EXAMPLE+·EXAMPLE+·".split("");

export default function Page() {
    const D = 360 / chars.length;
    return (
        <div className="flex min-h-screen items-center justify-center">
            <div className="size-36 [--r:56px]">
                <ul className="relative size-full animate-spin rounded-full [animation-duration:9s]">
                    {chars.map((char, i) => (
                        <li
                            key={i}
                            className="absolute inset-0 m-auto size-fit"
                            style={{ transform: `rotate(${D * i}deg) translateY(var(--r))` }}
                        >
                            {char}
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    );
}