Animated React form components
Voice prompt
An AI composer you can talk to. Press the mic and a soft tide of colour rises and ripples with your voice, splitting and tearing on loud moments, while the words it hears blur in.
Forms, press, Motion + GSAP
Install
npm i @gsap/react clsx gsap motion tailwind-merge && curl -o components/voice-prompt.tsx https://motion-brew.com/r/voice-prompt.tsxOne self contained file for React and Tailwind CSS: voice-prompt.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { VoicePrompt } from "@/components/voice-prompt";
export default function Assistant() {
return (
<VoicePrompt
theme="light"
onSubmit={({ text, mode }) => ask(text, mode)}
/>
);
}
The demo shows a set line (`script`) as the heard words. Words only advance while the voice level is up, so they follow your speech. Plug in your own speech to text for real transcripts.Props
| Prop | Type | Default | Description | |
|---|---|---|---|---|
| placeholder | string | "Ask me anything" | Placeholder for the empty field | |
| modes | { id; label; hint }[] | Agent, Chat, Research | Modes in the picker | |
| colors | string[] | dusk | Four colours: core, body, crest, outer bloom | |
| theme | "light" \ | "dark" | "light" | Card theme |
| microphone | boolean | true | Ask for the mic so the wave follows a real voice | |
| script | string | a sample request | Words revealed while listening | |
| onSubmit | ({ text, mode }) => void | Called on send | ||
| onAttach | () => void | Called by the plus button | ||
| className | string | Placement |
More forms
- Amount slider: Drag the grip thumb and the amount rolls like an odometer while the monthly payment works itself out.
- 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.
- 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.