<h1 data-splitting aria-label="Oh hello there">Oh hello there</h1>

/* Forked from Splitting.js demo */

@import url('https://fonts.googleapis.com/css?family=Livvic:700&display=swap');

html { height: 100%; display: flex; }
body { margin: auto; }
html, body {
  background: #151617;
  color: #FFF;
  font-family: 'Livvic', sans-serif;
}

.splitting .char {
	--h: calc(var(--char-index, 0) * 10deg);
	--color: hsl(var(--h), 80%, 50%);
  color: var(--color);
}

@keyframes slide-in {
  from {
    transform: translateY(-1em) rotate(-.5turn) scale(0.5);
    opacity: 0;
  }
}

h1 {
	font-size: 5rem;
}

Splitting().forEach(s => {
  s.words.forEach( word => {
		if (word.parentElement.getAttribute('aria-label')) {
    	word.setAttribute('aria-hidden', true)
		}
  })
})