#304
Typewriter
A prompt that types itself at 55ms per character, holds for 1100ms, then deletes at 28ms per character while a caret blinks. Typing in the field below takes over the line.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Typewriter" pattern (@codeatlasdev/ui demo #304, motion/text) in my app.
Call get_demo({ ids: ["#304"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: AI and search inputs with example prompts, hero taglines that cycle phrases, terminal and chat demos and onboarding hints.
Keep these library parts, with the props and tokens the demo uses:
- MotionStage, MotionCtx from "@codeatlasdev/ui"
Behaviour to keep:
- `MotionStage` from `@codeatlasdev/ui` with `label="Typewriter: a prompt types itself, holds, then deletes"` and `loop={4800}`
- `const TYPE = 55`, `const ERASE = 28` and `const HOLD = 1100` are the typing, deleting and hold times in milliseconds
- One autoplay cycle types `phrases[m.cycle % phrases.length]`, holds it, then deletes it
- `animation: tw-blink 1060ms steps(1, end) infinite` blinks the caret with a hard on/off step
- The typed text and caret are `aria-hidden="true"`; the labelled `id="tw-input"` input is the accessible control
- `bind:value={draft}`: typing in the field replaces the autoplay text, the manual takeover
- Under reduced motion `class:tw__caret--blink={!m.reduced}` stops the blink and the first phrase is shown complete
Exact motion (do not approximate):
- text content (characters typed, held, then deleted): 55ms per character, linear, delay 1100ms
- opacity (caret blink): 1060ms, steps(1, end)
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- MotionStage
@codeatlasdev/ui
How it is built
- `MotionStage` from `@codeatlasdev/ui` with `label="Typewriter: a prompt types itself, holds, then deletes"` and `loop={4800}`
- `const TYPE = 55`, `const ERASE = 28` and `const HOLD = 1100` are the typing, deleting and hold times in milliseconds
- One autoplay cycle types `phrases[m.cycle % phrases.length]`, holds it, then deletes it
- `animation: tw-blink 1060ms steps(1, end) infinite` blinks the caret with a hard on/off step
- The typed text and caret are `aria-hidden="true"`; the labelled `id="tw-input"` input is the accessible control
- `bind:value={draft}`: typing in the field replaces the autoplay text, the manual takeover
- Under reduced motion `class:tw__caret--blink={!m.reduced}` stops the blink and the first phrase is shown complete
Related
Loading source.