--- /** * TypewriterEffect — types out a sequence of words once the component * scrolls into view. Two presentations share one component behind the * `smooth` prop: the classic variant types characters one by one behind a * blinking cursor — each character is `display: none` until its turn in a * CSS `animation-delay` stagger, so the cursor advances with the text; the * smooth variant * slides a single overflow-hidden box open to reveal the whole line at * once (its target width is measured from a hidden twin). A tiny custom * element only handles the viewport check and, for the smooth variant, * the one-time width measurement — every animation itself is plain CSS. * Without JavaScript (or under prefers-reduced-motion) the words render * fully visible immediately. */ interface TypewriterWord { /** Word text; split into individual characters for the reveal. */ text: string; /** Extra classes applied to this word's characters, e.g. an accent color. */ className?: string; } interface Props { /** Words to type out, in order. */ words: TypewriterWord[]; /** Use the sliding-reveal variant instead of the classic char stagger. */ smooth?: boolean; /** Additional classes for the root element. */ class?: string; /** Additional classes for the blinking cursor bar. */ cursorClassName?: string; } const { words, smooth = false, class: className, cursorClassName, } = Astro.props; // Every character across every word gets a global index so the classic // variant's reveal stagger runs across the whole sentence, not per word. // The space after a word is typed as a character of its own (a no-break // space, so the word stays unbreakable), which keeps the cursor glued to // the last typed glyph instead of jumping ahead over word gaps. let charIndex = 0; const wordList = words.map((word, wordIndex) => { const glyphs = word.text.split(''); if (wordIndex < words.length - 1) glyphs.push('\u00a0'); return { className: word.className, chars: glyphs.map((char) => ({ char, index: charIndex++ })), }; }); --- { smooth ? (

{wordList.map((word) => ( {word.chars.map(({ char }) => ( {char} ))} ))}

) : ( {wordList.map((word) => ( {word.chars.map(({ char, index }) => ( {char} ))} ))} ) } { smooth && ( ) }

Installation

Install dependencies

Add these files

Configuration

Use it