Cycle a word in a clipped slot

At a glanceCopy Anchor Link

• Who: Headlines or inline labels that rotate a single word without remount-only fades.
• What: Stable-height clipped slot with padded block axis so descenders and underline stay visible; outgoing glides up (zk-word-roll-exit-up), incoming uses the standard appear contract (fade-up from below).
• Use when: Cycling provider names, emphasis words, or short tokens next to static copy.
• Avoid when: Full sentences or list carousels — use content-specific layout. For scroll reveal only, use data-reveal / data-animate without WordRoll.
• See also: Reveal and react with motion on any element

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 1.10.0 (via changesets).

ExampleCopy Anchor Link

import { Heading, WordRoll } from "@zedtech/zedkit-ui";

const words = ["Cursor", "Muse", "Claude"] as const;

<Heading level={1} typeRole="title" aria-label={`Set up in ${words.join(", ")}`}>
  Set up in{" "}
  <WordRoll words={words} value={words[0]} dwellMs={300} aria-hidden />
</Heading>

Wraps: (none), data-animate="fade-up", AnimateObserver, observeAnimate

AccessibilityCopy Anchor Link

Treat the roll as decorative when the full phrase is provided via aria-label on the heading; set aria-hidden on WordRoll. Under reduced motion, prefer a static inclusive string instead of cycling.