Text roll | Arcadia Design

Reading the plan

import { useState } from "react";
import { Button, TextRoll } from "@arcadia/ui";

function Rolling() {
  const [i, setI] = useState(0);
  return (
    <div {...sx("cmp-bar", cmp.bar)}>
      <span {...sx("cmp-status", cmp.status, cmp.statusUi)} role="status"><TextRoll text={LINES[i]!} /></span>
      <Button variant="secondary" size="sm" onClick={() => setI((i + 1) % LINES.length)}>Next</Button>
    </div>
  );
}

TSX

import { TextRoll } from "@arcadia/ui";

<TextRoll text={status} />

A status line that changes in place. The old text leaves upward as the new one rises in from below over --duration-slower, both clipped to the one line inside a soft top and bottom mask, so the row of text around it never jumps. Use it wherever a short phrase says what is happening now and is replaced by the next: a row's second line, a step's name, a counter's label.

The line takes the new text's width at once. Give it room, or its end fades.

Examples

Live text

Pass a function to draw the visible line: a Shimmer while the status is live.

Reading the plan

import { useState } from "react";
import { Button, Shimmer, TextRoll } from "@arcadia/ui";

function Live() {
  const [i, setI] = useState(0);
  return (
    <div {...sx("cmp-bar", cmp.bar)}>
      <span {...sx("cmp-status", cmp.status, cmp.statusUi)} role="status">
        <TextRoll text={LINES[i]!}>{(t) => <Shimmer tone="tertiary">{t}</Shimmer>}</TextRoll>
      </span>
      <Button variant="secondary" size="sm" onClick={() => setI((i + 1) % LINES.length)}>Next</Button>
    </div>
  );
}

The current text is in the page once, for a screen reader; the two rolling copies are hidden from it. Put the live-region role on the container, as the examples do with role="status", so each change is read once. Reduced motion swaps the text in place with no motion and no mask.

TextRoll

textrequired: string; The line. When it changes, the old text leaves upward and the new one rises in from below.
rootStyle: RootStyle; Typed StyleX override: where the line sits.
children: (text: string) => ReactNode; Draws a line's visible text (default: the text itself): wrap it in a Shimmer while the status is live.

Rest props go to HTMLAttributes<HTMLSpanElement>.

Usage

Examples

Live text

Accessibility

API reference

TextRoll