RotatingText

A word in a headline that cycles through alternatives.

Status pages for startups, agencies, platform teams

View code

tsx

<h2 mix={[displayHeading(2)]}>
	Status pages for{" "}
	<RotatingText words={["startups", "agencies", "platform teams"]} />
</h2>

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { RotatingText } from "@sdxc/ui/landing";

Stacks every word in one grid cell and runs one shared keyframe set on each, offset by its position, so exactly one word shows at a time. The animated words are hidden from assistive technology, which reads label instead.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`words`	`RemixNode[]`	Yes	The alternatives, first one first; two to six read well.
`interval`	`number`	No	Seconds each word holds. Defaults to DEFAULT_INTERVAL.
`iterations`	`number \| "infinite"`	No	Passes before settling on the first word, or `"infinite"`; wrap an endless one in a MotionLoop so it can be paused. Defaults to DEFAULT_ITERATIONS.
`label`	`string`	No	What assistive technology reads in the word's place. Defaults to the words joined with commas, so a listener hears every alternative.

Also accepts everything in TagProps<"span">.