Ask Nexus Input — React Component

A bold "Ask anything" headline paired with a pill-shaped search input. Placeholders rotate while idle, and on submit the text disintegrates right-to-left into drifting particles — a Thanos-snap dust effect rendered on canvas, finished off with framer-motion polish.

AI Componentsspringaiinputsearchdisintegrateparticlesthanossnapcanvasframer-motionplaceholder

Ask Nexus Input

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

title

Main headline shown above the input

placeholderInterval

Milliseconds between placeholder rotations

defaultValue

Initial value of the input

Generated JSX

Copy this into your page.

<useCallback
  title="Ask Nexus UI Anything"
  placeholderInterval={2800}
  defaultValue=""
/>

Animation effects

spring

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

About Ask Nexus Input

Ask Nexus Input is an AI query field with animated example query cycling and spring expand-on-focus behavior. When idle, the input cycles through example queries with a fade transition. On focus, the field expands with a Framer Motion spring layout animation and reveals a suggestions panel. Designed for AI search interfaces and copilot product demos, it connects to any streaming chat API via standard React event handlers.

Common use cases

AI search and query interfaces
Copilot and assistant product demos
Natural language command surfaces
AI product hero section inputs