Mini Typewriter

"use client";

import type * as React from "react";
import { cn } from "@/lib/utils";

type MiniTypewriterProps<T extends React.ElementType = "span"> = {
  as?: T;
  text: string;
  cursorChar?: string;
  className?: string;
  durationMs?: number;
} & Omit<React.ComponentPropsWithoutRef<T>, "as" | "children">;

function MiniTypewriter<T extends React.ElementType = "span">({
  as,
  text,
  cursorChar = "|",
  className,
  durationMs = 500,
  ...props
}: MiniTypewriterProps<T>) {
  const Tag = (as ?? "span") as React.ElementType;

  return (
    <Tag
      className={cn("inline-flex items-baseline font-mono", className)}
      {...props}
    >
      <style href="mini-typewriter">{`
        @keyframes tw-type {
          from { width: 0 }
        }
        @keyframes tw-blink {
          50% { opacity: 0 }
        }
        .tw-type {
          animation-name: tw-type;
          animation-fill-mode: forwards;
        }
        .tw-cursor {
          animation: tw-blink 1s step-end infinite;
        }
        @media (prefers-reduced-motion: reduce) {
          .tw-type,
          .tw-cursor {
            animation: none;
          }
        }
      `}</style>
      <span
        className="tw-type inline-block overflow-hidden whitespace-nowrap font-mono"
        style={{
          animationDuration: `${durationMs}ms`,
          animationTimingFunction: `steps(${text.length})`,
          width: `${text.length}ch`,
        }}
      >
        {text}
      </span>
      <span className="tw-cursor">{cursorChar}</span>
    </Tag>
  );
}

export { MiniTypewriter };

import { MiniTypewriter } from "@/components/mini-typewriter";

<MiniTypewriter text="Efficient" />

<MiniTypewriter
    durationMs={1000}
    text="Efficient"
/>

<MiniTypewriter
    cursorChar="_"
    text="Efficient"
/>

<MiniTypewriter as="h2" text="Efficient" />