export function TextRotation() {

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

    return (
        <div className="size-72 [--r:100px]">
            <ul className="relative size-full rounded-full
                           animate-spin animate-duration-5000
                           shadow-2xl">
                {
                    text.map((char, i) => (
                        <li className="absolute size-fit inset-0 m-auto"
                            style={ {
                                transform: `rotate(${ D * i }deg) translateY(var(--r))`,
                            } }
                            key={ i }>
                            { char }
                        </li>
                    ))
                }
            </ul>
        </div>
    )
}