Typewriter

Char-by-char text reveal with optional per-line strikethrough. Replicates the boogie.ro hero where two "wrong-answer" lines cross themselves out before the final accent line lands. Pure CSS animations under the hood — no GSAP, no per-frame JS — so it's cheap.

· site tip 2010
· site generic AI
· site memorabil

Usage

import { Typewriter } from '@bwo-ui/react';

<Typewriter
  as="h1"
  lines={[
    { text: '· site tip 2010',   strike: true },
    { text: '· site generic AI', strike: true },
    { text: '· site memorabil',  color: 'var(--bwo-red)' },
  ]}
/>

Each character receives its own animation-delay, computed cumulatively across all lines. Strike lines wait strikeWait seconds after the line's last char before the bar grows across them.

Props

PropTypeDefaultDescription
linesTypewriterLine[]—Lines to reveal. Each: { text, strike?, color? }.
asElementType'h1'Tag to render the outer element as.
charSpeednumber0.032Seconds between each character.
lineGapnumber0.18Seconds between the end of one line and the next.
strikeWaitnumber0.22Seconds after a `strike` line finishes before the bar starts.
initialDelaynumber0.12Delay before the first character animates in.
charDurationnumber0.6Per-character reveal duration.
charEasestring'cubic-bezier(.16,1,.3,1)'CSS easing for the char reveal.
strikeDurationnumber0.5Strike-bar growth duration.
strikeEasestring'cubic-bezier(.4,0,.2,1)'CSS easing for the strike bar.
fromYnumber30Initial Y offset in px (each char rises from here).

TypewriterLine

PropTypeDefaultDescription
textstring—The line to type.
strikebooleanfalseAnimate a strikethrough bar across after reveal completes.
colorstring—Per-line colour override (e.g. accent on the final line).

Tip: Pair with Preanimate so the typewriter only mounts (and starts revealing) after the rest of the chrome is ready.