Gaming_
Runs while it’s on screen
Typed Word
Rests on a word, deletes it, then types the next at a slightly uneven pace.
Usage
import { TypedWord } from '@wdzyi/ui';
const words = ['Gaming', 'Trading', 'AI'];
<h1 aria-label='Systems for gaming, trading and AI.'>
<span aria-hidden>
Systems for <TypedWord words={words} />
</span>
</h1>Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- wordsstring[]
- Keep this outside the render or memoised, since a new array starts it over.
Notes
- Each letter takes between 42 and 98ms. It’s the unevenness that makes it read as typing, and the numbers are at the top of the file.
- Say the whole sentence for screen readers, as in the example above, rather than letting them read each letter.
- If it scrolls off part way through a word, it lands on a whole one, so it starts clean when it comes back.
- With reduced motion, it stays on the first word.