export function TextRotate() {

    const TEXT = [ "千", "里", "之", "行", ",", "始", "于", "足", "下", "。" ];
    const LEN = TEXT.length;
    const D = 360 / LEN;

    return (
        <div className="size-96 p-5 select-none [--r:140px]">
            <ul className="relative size-full rounded-full
                           animate-spin animate-duration-3000
                           shadow-2xl shadow-slate-400">
                {
                    TEXT.map((letter, i) => (
                        <li className="absolute size-fit inset-0 m-auto"
                            style={ {
                                transform: `rotate(${ D * i }deg) translateY(var(--r))`
                            } }
                            key={ i }>
                            <span className="font-orbitron text-2xl">{ letter }</span>
                        </li>
                    ))
                }
            </ul>
        </div>
    )
}