<p data-splitting>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way—in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</p>
/* Clear out these styles to start fresh or use this as a base! */

@import url(https://fonts.googleapis.com/css?family=Kanit:400);

body {
  font-family: Kanit, sans-serif;
  font-size: 18px;
  line-height: 1.3;
  max-width: 50ch;
  margin: 3rem;

.splitting .word:nth-child(3n+1) {
  opacity: 0.9;

.splitting .word:nth-child(13n+1) {
  transform: scale(0.85) rotate(1deg);
  opacity: 0.7;

.splitting .word:nth-child(7n+1) {
  transform: scale(1.1) rotate(-1deg);
  opacity: 0.5;

.splitting .word:nth-child(15n+1) {
  transform: scale(0.9) rotate(-4deg);
  opacity: 0.6;

.splitting .word:nth-child(3n-2) {
  filter: blur(0.33px);
  display: inline-block;

.splitting .word:nth-child(19n+1) {
  transform: scale(0.7) translateX(-8px);

.splitting .word:nth-child(22n+1) {
  transform: scale(1.15) translateX(2px) rotate(5deg);

External CSS

  1. https://unpkg.com/splitting/dist/splitting.css
  2. https://unpkg.com/splitting/dist/splitting-cells.css

External JavaScript

  1. https://unpkg.com/splitting/dist/splitting.min.js