Vanish input

Installation

$ npx shadcn@latest add https://goodui.dev/r/vanish-input.json

The file lands in components/goodui/vanish-input.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/vanish-input works too.

Usage

import { VanishInput } from "@/components/goodui/vanish-input"

const HINTS = ["Search Maya Chen", "Find invoice INV-2041", "Bookings next Tuesday", "Unpaid invoices over $500"]

export function GlobalSearch({ onSearch }: { onSearch: (q: string) => void }) {
  return (
    <VanishInput
      placeholders={HINTS}
      label="Search clients, bookings and invoices"
      submitLabel="Search"
      onSubmit={onSearch}
    />
  )
}

When to use

Examples

<VanishInput
  placeholders={["Move Friday's 9am to Monday", "Who hasn't booked in 60 days?"]}
  interval={3600}
  label="Ask the scheduling assistant"
  submitLabel="Ask"
  className="h-11 rounded-xl"
  onSubmit={(prompt) => sendToAssistant(prompt)}
/>

const [query, setQuery] = React.useState("")

<VanishInput value={query} onValueChange={setQuery} onSubmit={addToRecent} label="Search" />
<button type="button" onClick={() => setQuery("INV-2038")}>INV-2038</button>

API reference

Accessibility

• •Renders a real <form> with a text <input> and a submit <button>, so Enter and the button both submit.
• •The input's accessible name is label, or the first placeholder when label is not set; the rotating hints are aria-hidden.
• •The arrow button is named by submitLabel (default "Submit") and is disabled while the field is empty.
• •The particle canvas is aria-hidden. Nothing is announced on submit; announce the result yourself if it matters.

Motion

• •Placeholders change every interval ms (default 3000) while the field is empty: the old one slides up and blurs out, the new one rises in, 0.3 s each.
• •On submit the text is drawn to a canvas and sampled into particles that drift up and to the right and fade, the end of the text first; the effect runs for at most 120 frames.
• •The arrow icon sits rotated -90° while empty and springs upright (stiffness 500, damping 28) once there is text.
• •Reduced motion: no particles, the field just clears; placeholders cross-fade in 0.15 s instead of sliding, and the arrow does not rotate.

• •Placeholder rotation stops while the field has text and while the tab is hidden.
• •The particle loop runs only after a submit, stops when the tab is hidden, and is cancelled on unmount; the canvas resolution is capped at 2x device pixel ratio.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related