Rotating words

One word exits up, the next rises from below — a clipped column on one variable.

Use it for: Hero headlines: "We build ______".
Knobs: --sv-word (index), --sv-duration; drive it from state, scenes or an interval

we build brandswebsitesproducts

<h1 class="text-5xl font-extrabold">
  we build
  <span class="sv-words text-violet-400">
    <span>brands</span><span>websites</span><span>products</span>
  </span>
</h1>
<!-- set --sv-word from your state; scenes drive it for free in pinned stories -->

<h1>we build
  <span class="sv-words">
    <span>brands</span><span>websites</span><span>products</span>
  </span>
</h1>

/* the preset (styles/state.css): */
.sv-words { display: inline-flex; flex-direction: column;
  vertical-align: bottom; height: 1.15em; overflow: hidden; }
.sv-words > * { display: block; height: 1.15em; line-height: 1.15;
  translate: 0 calc(var(--sv-word, 0) * -1.15em);
  transition: translate .65s var(--sv-ease, cubic-bezier(.28,.84,.42,1)); }

// drive it (state, scenes, or a timer):
el.style.setProperty('--sv-word', nextIndex)

const [word, setWord] = useState(0)
<h1>we build{' '}
  <span className="sv-words" style={{ '--sv-word': word }}>
    {words.map(w => <span key={w}>{w}</span>)}
  </span>
</h1>

Engine: npm i scrollvars — full core 3.9 KB gzip. All effects respect prefers-reduced-motion and render complete without JS.