JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio assumenda laudantium, beatae autem, quae sed eaque, ratione, deleniti numquam soluta consectetur? Quos autem pariatur soluta! Velit magni deserunt obcaecati amet.</p>

CSS

body {
  background: #222;
}
#paragraph {
  font-size: 2em;
  color: white;
}

JavaScript

const STEPS = 36;
const RADIUS = 2;
let OFFSET = 120;

function range(start, end) {
	return Array.from({ length: end - start }, (_, i) => i + start);
}

function render() {
  const textShadow = range(0, STEPS).map(step => {
    const percent = step / STEPS;
    const hue = Math.floor(((percent * 360) + OFFSET) % 360);
    const color = `hsl(${hue}, 100%, 50%)`;

    const rotation = Math.PI * 2 * percent;
    const x = RADIUS * Math.cos(rotation);
    const y = RADIUS * Math.sin(rotation);
    const shadow = `${x}px ${y}px ${color}`;
    return shadow
  }).join(', ');

  paragraph.style.textShadow = textShadow;

}

render();
requestAnimationFrame(start => {
	function tick(now) {
    const difference = now - start;
    OFFSET = 120 + (difference / 10);

    render();
    requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
});