Installation
Usage
import AiChatInput from "@/components/ruixen/ai-chat-input";
export default function App() {
return (
<AiChatInput
placeholders={[
"Ask me anything...",
"Describe what you need built",
"Write a function that...",
]}
onSubmit={(value) => console.log(value)}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
placeholders | string[] | 5 default prompts | Rotating placeholder strings |
onSubmit | (value: string) => void | - | Callback with submitted value |
onChange | (e: ChangeEvent<HTMLInputElement>) => void | - | Callback on every keystroke |
className | string | - | Additional CSS classes |
Features
- Pixel-scatter vanish: On submit, text dissolves into particles that drift upward with coherent velocity and exponential fade
- Rotating placeholders: Cycle every 3s with spring-timed y-slide transitions
- Materializing submit: Arrow button scales from 85%/6% opacity to full as you type
- Animated arrow: SVG stroke draws in as text appears via dash-offset animation
- Spring-timed: All transitions use
cubic-bezier(0.16, 1, 0.3, 1)easing - Border warmth: Container border shifts from 8% to 15% opacity with content