Text reveal

Characters appear one after another. Screen readers still read the heading as written.

Motion, declared.

.headline-scene {
  display: grid;
  place-items: center;
  height: 100%;
}

.headline {
  margin: 0;
  font-size: clamp(34px, 6vw, 60px);
  letter-spacing: -0.03em;
}

.headline .k-char {
  --k-when: view once;
  --k-opacity: 0 1;
  --k-y: 0.5em 0;
  --k-rotate: 14deg 0deg;
  --k-stagger: 35ms;
  --k-motion: bouncy;
}

<div class="headline-scene" data-kinesis>
  <h2 class="headline" data-k-split="chars">Motion, declared.</h2>
</div>

import { splitAll } from "@amineyarman/kinesis/text"

const root = document.querySelector("[data-kinesis]")
splitAll(root)

Uses

--k-when
view
--k-stagger
text