Typed Mark

@sushindustries/ui

Types a word out one character at a time, cycling the syntax palette. No JavaScript, no state, and it runs with scripting off.

5 min read
View as MarkdownEdit on GitHub

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Viewport width
Phone22remthe floor, the narrowest this promises to work at
tanstacktanstack add https://adamjurek.com/r/tanstack/typed-mark.jsonshadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/typed-mark.json

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

The site's assistant panel hands its mark straight to a mark prop, so the name types itself in every new conversation:

import { AssistantPanel, TypedMark } from "@sushindustries/ui";

export function Assistant() {
	return (
		<AssistantPanel
			mark={<TypedMark text="sushi industries" />}
			messages={messages}
			onSend={ask}
			placeholder="Ask about this site"
		/>
	);
}
tsx

What this example is not

AssistantPanel treats mark as an opaque ReactNode - it does not know this is a TypedMark and would render any other node just as happily. The pairing here is a choice made at the call site, not a contract between the two components.