Are the ai2 Typewriter inputs free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Typewriter inputs

Five inputs with animated placeholders: a typewriter, a cycling prompt, a caret, a ghost suggestion and a morphing label. Each is sized, token-driven and wraps a real input.

InputsTypewriter

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/inputs-typewriter

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion

Copy the source

components/ui/inputs-typewriter.tsx

"use client"

import * as React from "react"
import { useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Typewriter input family: 5 text inputs built on a typed, animated placeholder. The animation is driven by useEffect plus setInterval (with cleanup) at a fixed interval (no Date.now). Every loop is off under reduced-motion. Colour comes ONLY from tokens. Each wraps a real <input> and passes native props through. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const height: Record<StyledSize, string> = {
  sm: "h-8 text-sm",
  md: "h-9 text-sm",
  lg: "h-10 text-base",
  xl: "h-12 text-base",
}

const fieldBase =
  "w-full bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"

const wrapBase =
  "relative inline-flex w-56 max-w-full items-center rounded-lg border border-field-border px-3 transition-colors focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50"

type Props = Omit<React.ComponentProps<"input">, "size"> & { size?: StyledSize }

/* Focus and filled-value tracking (we stop the animation in these two states). */
function useIdle(props: Pick<Props, "value" | "defaultValue" | "onChange" | "onFocus" | "onBlur">) {
  const [focused, setFocused] = React.useState(false)
  const [internal, setInternal] = React.useState(
    props.defaultValue != null ? String(props.defaultValue) : ""
  )
  const value = props.value != null ? String(props.value) : internal
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInternal(e.target.value)
    props.onChange?.(e)
  }
  const onFocus = (e: React.FocusEvent<HTMLInputElement>) => {
    setFocused(true)
    props.onFocus?.(e)
  }
  const onBlur = (e: React.FocusEvent<HTMLInputElement>) => {
    setFocused(false)
    props.onBlur?.(e)
  }
  const idle = !focused && value.length === 0
  return { idle, value, handlers: { onChange, onFocus, onBlur } }
}

/* The loop that types out a single word letter by letter, deletes it, then moves to
   the next. */
function useTypewriter(words: string[], active: boolean) {
  const [text, setText] = React.useState("")
  React.useEffect(() => {
    if (!active || words.length === 0) {
      setText("")
      return
    }
    let wordIndex = 0
    let charIndex = 0
    let deleting = false
    const id = setInterval(() => {
      const word = words[wordIndex % words.length]
      if (!deleting) {
        charIndex += 1
        setText(word.slice(0, charIndex))
        if (charIndex >= word.length) deleting = true
      } else {
        charIndex -= 1
        setText(word.slice(0, charIndex))
        if (charIndex <= 0) {
          deleting = false
          wordIndex += 1
        }
      }
    }, 110)
    return () => clearInterval(id)
  }, [active, words])
  return text
}

/* Typewriter: placeholder metni dongu halinde yazilir ve silinir. */
export function TypewriterInput({
  className,
  size = "md",
  words = ["Search projects...", "Search people...", "Search anything..."],
  placeholder,
  ...props
}: Props & { words?: string[] }) {
  const reduce = useReducedMotion()
  const { idle, handlers } = useIdle(props)
  const active = !reduce && idle
  const typed = useTypewriter(words, active)
  return (
    <span data-slot="styled-input" className={cn(wrapBase, height[size], className)}>
      <input
        {...props}
        {...handlers}
        placeholder={active ? typed : placeholder}
        className={cn(fieldBase, "h-full")}
      />
    </span>
  )
}

/* CyclePlaceholder: it cycles between several placeholder strings as whole texts. */
export function CyclePlaceholderInput({
  className,
  size = "md",
  placeholders = ["name@example.com", "you@work.com", "hello@team.io"],
  placeholder,
  ...props
}: Props & { placeholders?: string[] }) {
  const reduce = useReducedMotion()
  const { idle, handlers } = useIdle(props)
  const active = !reduce && idle && placeholders.length > 0
  const [index, setIndex] = React.useState(0)
  React.useEffect(() => {
    if (!active) return
    const id = setInterval(() => setIndex((i) => (i + 1) % placeholders.length), 2200)
    return () => clearInterval(id)
  }, [active, placeholders])
  return (
    <span data-slot="styled-input" className={cn(wrapBase, height[size], className)}>
      <input
        {...props}
        {...handlers}
        placeholder={active ? placeholders[index] : placeholder}
        className={cn(fieldBase, "h-full")}
      />
    </span>
  )
}

/* Caret: metinden once yanip sonen token caret blogu. */
export function CaretInput({ className, size = "md", ...props }: Props) {
  const reduce = useReducedMotion()
  const { idle, handlers } = useIdle(props)
  return (
    <span data-slot="styled-input" className={cn(wrapBase, "gap-1.5", height[size], className)}>
      <span
        aria-hidden="true"
        className={cn(
          "h-4 w-0.5 shrink-0 rounded-full bg-primary",
          idle && !reduce ? "animate-pulse motion-reduce:animate-none" : "opacity-0"
        )}
      />
      <input {...props} {...handlers} className={cn(fieldBase, "h-full")} />
    </span>
  )
}

/* Ghost: a faint suggestion ghost; accepted with Tab / right arrow. */
export function GhostInput({
  className,
  size = "md",
  suggestion = "",
  ...props
}: Props & { suggestion?: string }) {
  const [value, setValue] = React.useState(props.defaultValue != null ? String(props.defaultValue) : "")
  const current = props.value != null ? String(props.value) : value
  const showGhost =
    suggestion.length > 0 &&
    current.length > 0 &&
    suggestion.toLowerCase().startsWith(current.toLowerCase()) &&
    suggestion.length > current.length
  const remainder = showGhost ? suggestion.slice(current.length) : ""

  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value)
    props.onChange?.(e)
  }
  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (showGhost && (e.key === "Tab" || e.key === "ArrowRight")) {
      e.preventDefault()
      setValue(suggestion)
    }
    props.onKeyDown?.(e)
  }
  return (
    <span data-slot="styled-input" className={cn(wrapBase, height[size], className)}>
      <span className="relative inline-flex h-full w-full items-center">
        <span
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 flex items-center whitespace-pre text-muted-foreground/50"
        >
          {current}
          <span>{remainder}</span>
        </span>
        <input
          {...props}
          value={current}
          onChange={onChange}
          onKeyDown={onKeyDown}
          className={cn(fieldBase, "relative h-full")}
        />
      </span>
    </span>
  )
}

/* MorphLabel: odakta / dolu iken etiket kayarak kuculur ve token'a doner. */
export function MorphLabelInput({
  className,
  size = "md",
  id,
  label = "Label",
  ...props
}: Props & { label?: string }) {
  const autoId = React.useId()
  const inputId = id ?? autoId
  return (
    <span
      data-slot="styled-input"
      className={cn(
        "relative inline-flex w-56 max-w-full items-center rounded-lg border border-field-border px-3 transition-colors focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50",
        height[size],
        className
      )}
    >
      <input id={inputId} placeholder=" " {...props} className={cn(fieldBase, "peer h-full")} />
      <label
        htmlFor={inputId}
        className="pointer-events-none absolute left-3 top-1/2 origin-left -translate-y-1/2 text-muted-foreground transition-all duration-(--motion-base) ease-(--motion-ease) peer-focus:top-0 peer-focus:-translate-y-1/2 peer-focus:scale-90 peer-focus:bg-background peer-focus:px-1 peer-focus:text-primary peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:scale-90 peer-[:not(:placeholder-shown)]:bg-background peer-[:not(:placeholder-shown)]:px-1 motion-reduce:transition-none"
      >
        {label}
      </label>
    </span>
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Typewriter

The placeholder types and deletes on a loop.

Cycle

The placeholder cycles through prompts.

Caret

A blinking token caret before the text.

Ghost

A faint suggestion you can accept.

Morph label

The label morphs and slides on focus.

Label

Labelsm

Labelmd

Labellg

Labelxl

ai2 Typewriter inputs: 5 styled variations on the token system

The ai2 Typewriter inputs are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around inputs with animated placeholders. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: a timer types the placeholder and blinks the caret. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the typing stops and a static placeholder is shown.

What is in the ai2 Typewriter inputs?

5 exports in one file: Typewriter, Cycle, Caret, Ghost and Morph label. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: a timer types the placeholder and blinks the caret.
Reduced-motion aware: Under prefers-reduced-motion, the typing stops and a static placeholder is shown.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Typewriter inputs sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.