JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Radio Player</title>
    <link rel="stylesheet" href="style.css">
    <script src="splitting.js"></script>

</head>

<body>


    <div class="circle" data-splitting>
        Circle-Text-Animation-Effect-Cool-great
    </div>
    <script>
        Splitting();
    </script>


</body></html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: monospace;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color:aqua;
}


.circle {
    transform-style: preserve-3d;
    animation: animate 8s linear infinite;
}

@keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
    }

    100% {
        transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
    }
}

.circle .char {
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: blue;
    font-size: 4em;
    padding: 5px 12px;
    border: 4px solid black;
    transform-style: preserve-3d;
    transform-origin: center;
        transform: rotateY(calc(var(--char-index) * 10deg)) translateZ(250px);

}

JavaScript

(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	typeof define === 'function' && define.amd ? define(factory) :
	(global.Splitting = factory());
}(this, (function () { 'use strict';

var root = document;
var createText = root.createTextNode.bind(root);

/**
 * # setProperty
 * Apply a CSS var
 * @param {HTMLElement} el
 * @param {string} varName 
 * @param {string|number} value 
 */
function setProperty(el, varName, value) {
    el.style.setProperty(varName, value);
} 

/**
 * 
 * @param {!HTMLElement} el 
 * @param {!HTMLElement} child 
 */
function appendChild(el, child) {
  return el.appendChild(child);
}

/**
 * 
 * @param {!HTMLElement} parent 
 * @param {string} key 
 * @param {string} text 
 * @param {boolean} whitespace 
 */
function createElement(parent, key, text, whitespace) {
  var el = root.createElement('span');
  key && (el.className = key); 
  if (text) { 
      !whitespace && el.setAttribute("data-" + key, text);
      el.textContent = text; 
  }
  return (parent && appendChild(parent, el)) || el;
}

/**
 * 
 * @param {!HTMLElement} el 
 * @param {string} key 
 */
function getData(el, key) {
  return el.getAttribute("data-" + key)
}

/**
 * 
 * @param {import('../types').Target} e 
 * @param {!HTMLElement} parent
 * @returns {!Array<!HTMLElement>}
 */
function $(e, parent) {
    return !e || e.length == 0
        ? // null or empty string returns empty array
          []
        : e.nodeName
            ? // a single element is wrapped in an array
              [e]
            : // selector and NodeList are converted to Element[]
              [].slice.call(e[0].nodeName ? e : (parent || root).querySelectorAll(e));
}

/**
 * Creates and fills an array with the value provided
 * @param {number} len
 * @param {() => T} valueProvider
 * @return {T}
 * @template T
 */
function Array2D(len) {
    var a = [];
    for (; len--; ) {
        a[len] = [];
    }
    return a;
}

/**
...