Typewriter

Component

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Typewriter to your project and fits it to your theme.

Code

How Typewriter is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  )
}