AI prompt input

A composer for an AI assistant: a growing field with rolling placeholders, file chips, a model picker, web search, voice with a rippling particle ring, and a send that launches into a shimmering working state.

Forms, type, Motion + GSAP

Install

npm i @gsap/react clsx gsap motion tailwind-merge && curl -o components/prompt-input.tsx https://motion-brew.com/r/prompt-input.tsx

One self contained file for React and Tailwind CSS: prompt-input.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { PromptInput } from "@/components/prompt-input";

export default function Page() {
  return (
    <PromptInput
      onSubmit={({ text, model, web, files }) =>
        ask(text, { model, web, files })
      }
      onAttach={() => openFilePicker()}
    />
  );
}

Props

Prop	Type	Default	Description
placeholders	string[]	four examples	Placeholders the empty field rolls through
models	{ id; label; hint }[]	three models	Models in the picker
onSubmit	({ text, model, web, files }) => void \	Promise		Called on send; a promise keeps the working state until it settles
onAttach	() => void	adds a sample file	Called by the attach button
className	string		Size and shape of the composer

More forms

Payment form: Card details with a focus ring that glides between fields, floating labels, card network logos and a lock that snaps shut, ending on a sealed confirmation.
Verify flow: Connect, check, verified: a segmented bar fills, a highlight slides down the checks as each one passes, and a green seal bursts in when you are connected.
Morph search: A search pill that lifts into a card.
Rolling stepper: A stepper whose digits roll like an odometer.

All animated react form components