Typer

Text 21

About

A text component that reveals a string character-by-character, with each glyph flickering through randomized filled-pill, accent, and outline states before settling into plain text.

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

Code

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

Usage.tsx

"use client";

import { Typer, type TyperProps } from "@/components/ui/typer";

export default function TyperExample({
  fps = 20,
  cycles = 3,
  stagger = 0.15,
  startOnView = true,
  accent = "#12a150",
}: Partial<TyperProps>) {
  return (
    <div className="flex w-full items-center justify-center px-6 py-16">
      <Typer
        accent={accent}
        className="font-semibold text-xl leading-[1.15] tracking-tight sm:text-2xl"
        cycles={cycles}
        fps={fps}
        stagger={stagger}
        startOnView={startOnView}
        text={"Type that assembles itself, one glyph at a time."}
      />
    </div>
  );
}