Heroes

Rotator

Because saying "everything" wasn't ambitious enough.

Types each word, holds, deletes, advances, repeats, the canonical AI-startup-headline animation. Use `renderWord` for custom treatment, or skip the component entirely and call `useTypewriter()` yourself.

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/rotator.json

Examples

Basic

AI for

<h1>
  AI for{' '}
  <GradientText>
    <Rotator words={["doctors", "lawyers", "founders", "everyone"]} />
  </GradientText>
</h1>

Faster + no cursor

Stop .

<Rotator
  words={["context-switching", "writing emails", "shipping slop"]}
  typeMs={50}
  holdMs={1000}
  hideCursor
/>

Custom word renderer

Built for

<Rotator
  words={["builders", "thinkers", "doers"]}
  renderWord={(w) => <span style={{ borderBottom: "2px solid #ec4899" }}>{w}</span>}
/>

Props

Prop	Type	Default	Description
words*	string[]	-	Words to cycle through.
typeMs	number	70	ms per character (typing).
deleteMs	number	32	ms per character (deleting).
holdMs	number	1500	ms to hold the full word.
loop	boolean	true	Restart at the start once finished.
cursor	string	"▍"	Cursor character.
hideCursor	boolean	-	Hide the blinking cursor.
renderWord	(word, index) => Snippet	-	Custom word renderer.
onWordReached	(word, index) => void	-	Callback at end of type.

Next WordRoll ] →