shadcn.io is not affiliated with official shadcn/ui
Typewriter FAQ Block for Svelte
A FAQ for a print-on-demand zine press: a card in card of six rows whose answers type themselves out the first time a question opens, then stay put.
Installation
Overview
A typewriter FAQ for Svelte with Ark UI. A start-aligned title and sentence sit above a card in card: a muted shell with + marks on its corners wraps a raised panel that is light on a light page and dark on a dark one, and six hairline rows inside it open one at a time. The first time a question opens, its answer is typed out character by character behind a caret that stops at the end; open it again and it's simply there. The first question is open when the page loads and shows whole, because typing starts when someone asks. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Accordion, Typing Text and Guides, with CSS transitions and your theme's tokens for every colour. For playful product pages where an answer arriving like a message suits the brand.
FAQ
How does the typing work, and how do I change it?
Opening a question for the first time puts a Typing Text in its answer, which types the sentence once, without looping. Its speed (14 milliseconds a character on average), jitter (how uneven each keystroke is) and delay (the pause before the first one, so the row has opened) are props in Answer. When it finishes, the row swaps to the plain paragraph, so reopening it costs nothing and the caret is gone. The questions and answers are in QUESTIONS at the top of the file, and OPEN_QUESTION names the one that starts open.
What do screen readers and search engines get?
The whole answer, all the time. An invisible copy of the answer sits in the row and holds its full height, so the card never grows as the text types, and Typing Text keeps the complete sentence for screen readers, which read it once rather than letter by letter. The row's button announces itself as expanded the moment it opens.
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start (as its invisible copy until it's been typed), hidden until its question opens.
What happens with reduced motion?
The answer shows whole at once: Typing Text draws the finished line and the caret is hidden, so there is nothing to wait for and nothing blinking. The entrances are off too, and the chevron swaps without animating. The answers also open and close at once, with no height animation.
How does it work with a keyboard?
Each question is a button inside its own h3 under the section's h2, with a chevron at its start that points right when closed and down when open (it swaps between two icons, so it reads correctly in a right-to-left page). Tab moves from question to question, Enter or Space opens and closes one, and one answer is open at a time.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.