AI Thinking Orb Prompt Input — Animated React Component

0views

2/2

A prompt input pill that shrinks into a ball on submit, flies to the center, becomes a rotating dotted orb while it thinks, then unfolds into an answer card. Suited to AI assistant and chat pages.

Installation

How to use

"use client";

import OrbPrompt from "@/components/ai-orb-prompt-input";

export default function Page() {
  return (
    // The component fills its parent, so give the parent a height
    <div style={{ height: "100vh" }}>
      <OrbPrompt
        theme="dark"
        minThinkMs={3000}
        placeholder="Type a question…"
        onSubmit={async (question) => {
          // Call your API here and return the answer text
          return "You asked: " + question;
        }}
      />
    </div>
  );
}

Dependencies

No extra dependencies listed.

Back to all components More AI

AI Thinking Orb Prompt Input — Animated React Component

Related components

AI Chat Prompt Composer