Typed Mark

A word typed out one character at a time in the CLI's syntax colours, built entirely in CSS with no JavaScript and no state - the markup renders once and the animation is a stagger delay per character. Reach for it for a short name or phrase that should feel alive without costing a re-render.

Why it is built this way

The obvious build is a useState counter and a setInterval, which costs a re-render per character, can't render on the server, and shows the whole word for one frame before the effect even runs. This renders the finished markup once and lets CSS decide when each character becomes visible, so the server and the client agree, the animation survives JavaScript being off, and a five-character word costs the same as a fifty-character one.

Install

tanstack add https://adamjurek.com/r/tanstack/typed-mark.json

pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/typed-mark.json

pnpm add @sushindustries/ui @sushindustries/atoms

What you get