Generic `--distance` & `--percent` vars

[shshaw]

Don’t directly use the --char-index, instead, use a --split-index var and a --split-total var that are set based on what you’re targeting.

Then the --distance and other values can be based on those vars, and then with .char { --split-index: --char-index; }, --distance within that .char becomes based on the char’s values

[shshaw]

Proof of concept: https://codepen.io/shshaw/pen/1433da294c16062e8907c8c46f5c57a6

Seems to be working 👍

[notoriousb1t]

Is the split index in addition to char index or a replacement?

[shshaw]

It's a reference to it, at least in .char!

.splitting .word {
  --split-index: var(--word-index);
  --split-total: var(--word-total);
}

.splitting .char {
  --split-index: var(--char-index);
  --split-total: var(--char-total);
}

This way --split-percent, etc, can be used for .word, .cell, you name it!

No changes needed to JS. Should be able to deploy in splitting.css