A real, playable typewriter in SVG: each key presses down, its typebar swings up to strike the ribbon, and the carriage steps along. Click it and type.
"use client"
import { Typewriter } from "@/components/ui/typewriter"
const settings = {
text: "Dear reader,\nevery key is wired to a typebar. Press one and its bar swings up out of the basket, strikes the ribbon, and the carriage steps left for the next letter.\n\nYours, 23rd",
label: "23rd",
color: "#8EC3B5",
speed: 12,
jitter: 0.3,
columns: 32,
humanize: true,
loop: true,
interactive: true,
sound: false,
}
export default function TypewriterDemo(props: Partial<typeof settings>) {
const s = { ...settings, ...props }
return (
<div className="flex min-h-[520px] w-full flex-col items-center justify-center gap-2 bg-background p-4">
<div className="relative aspect-[16/9] w-full max-w-4xl">
<Typewriter
text={s.text}
label={s.label}
color={s.color}
speed={s.speed}
jitter={s.jitter}
columns={s.columns}
humanize={s.humanize}
loop={s.loop}
interactive={s.interactive}
sound={s.sound}
/>
</div>
{s.interactive ? (
<p className="text-xs text-muted-foreground">Click it and type</p>
) : null}
</div>
)
}