Skip to content
Portfolio Kit

Word Rotate

Cycles words inside a headline with a slide-and-blur swap, in a slot as wide as the widest word so the line never reflows. Screen readers get one static sentence.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/word-rotate
First time? Add the @portfolio-kit registry to components.json
components.json
{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

Usage

Examples

Mid-sentence

In the middle of a title, the slot keeps the widest word's width, so the words after it never move.

In Body Copy

It works in body copy too: a status line with a custom screen-reader label, where fit="word" eases the width so the full stop follows each place.

Tones

highlight makes the rotating word the accent, muted lets it recede, default blends it into the line.

API Reference