Heroes
WordRoll
All the breadth-flexing of a Rotator, without making the visitor wait for it to type.
Vertical slide-roll cousin of Rotator. The active word slides in, the previous one slides out, no typing, no cursor. Pass `gradient` to get the AI-pink treatment per-word (don't nest inside `<GradientText>`, background-clip:text doesn't apply to the absolutely-positioned rolling words).
Install
Copy this owned-code component into your app from the registry.
pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/word-roll.json
Examples
Default (roll up)
AI for doctors
<h2>
AI for{" "}
<WordRoll
words={["doctors", "lawyers", "founders", "everyone"]}
gradient
/>
</h2>Roll down + slower
Built for builders
<WordRoll
words={["builders", "founders", "tinkerers"]}
direction="down"
intervalMs={3000}
transitionMs={700}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| words* | string[] | - | Words to cycle through. |
| intervalMs | number | 2200 | ms each word holds before rolling out. |
| transitionMs | number | 500 | ms of the slide animation itself. |
| direction | "up" | "down" | "up" | Direction the active word rolls in from. |
| gradient | boolean | - | Paint each word with the AI gradient. Use instead of nesting in <GradientText>. |