Preloaders

Words Preloader

Themeable line preloader — product lines clip up with SlideUpText, optional last-beat mark, then a curved lip flattens as the panel slides up.

Import

tsx

import { WordsPreloader } from "@cronus-ui/ui";

bash

npx cronus-ui add words-preloader

Examples

Product words

The page sits underneath. Each line clips up with SlideUpText, the mark lands, then the curved lip flattens and the panel slides up. Replay from the nav.

Cronus

Product UI system

Ship the interface, not another kit.

Compose of apps, a live theme, and an authorship contract. The catalog is the means.

Get startedBrowse components

Components

182

Blocks

Templates

tsx

const [show, setShow] = useState(true);

return (
  <main className="relative">
    <AnimatePresence>
      {show ? (
        <WordsPreloader
          end={<BrandMark className="h-16 w-32 text-fg" />}
          onComplete={() => setShow(false)}
        />
      ) : null}
    </AnimatePresence>
    <Page />
  </main>
);

.cronus

No audit fixture declares this family in .cronus yet.

React onlyParity: Not portedParity scoreboard

API Reference

Generated from the component's exported types.

WordsPreloaderLabels

Prop	Type	Default	Description
`status`*	`string`	—	Accessible name for the loading status.

WordsPreloaderProps

Prop	Type	Default	Description
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the underlying DOM node.
`words`	`readonly string[]`	—	Lines cycled before the curve exits. Product lines by default.
`firstDelayMs`	`number`	`FIRST_DELAY_MS`	Hold after the first line has revealed, in ms.
`stepDelayMs`	`number`	`STEP_DELAY_MS`	Hold after each following line has revealed, in ms.
`lastHoldMs`	`number`	`LAST_HOLD_MS`	Extra hold on the last beat before `onComplete`, in ms.
`end`	`ReactNode`	—	Optional last beat — typically a brand mark — after the copy.
`onComplete`	`() => void`	—	Fired after the last beat has been held. Unmount inside `AnimatePresence`.
`labels`	`Partial<WordsPreloaderLabels>`	—	Override default English strings.
`layout`	`"page" \| "contained"`	`"page"`	One of "page" \| "contained".
`asChild`	`boolean`	—	Render as the child element via Slot.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.