Dev Design LibraryAnimated AI Element Components
Dev Design Library indexes 194 Animated ai element components from 47 open-source UI libraries, with the most coming from ShaderCN, Spectrum UI, Kokonut UI, Notra and beUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. These are the ai element components tagged as animated: motion on hover, on scroll or on load, usually built with CSS transitions or Framer Motion.
Showing 120 of 194, a mix from every library. Open a library to see all of its components.
OrbReact Bits · ReactFloating energy orb with customizable hover effect.
Ai Response StatusReact Spectrum · React
Prompt ComposerCult UI · ReactMultiline prompt field with shader avatar, staggered placeholder, loading line, and send/attach chrome
Image Generation Placeholdertransitions.dev · HTML/CSS- Bot AvatarsLibraries.dev · ReactAnimated bot avatars for React — eighteen glossy 3D shapes with living faces that turn, hop and flip, three states…
Shortcode suggestionsReUI · ReactA design review reply where typing a colon shortcode shows emoji suggestions under the field.
AI Prompt Input StudioAmicro Micro Transitions · ReactDynamic auto-expanding AI textarea with model switcher, live voice dictation wave pulse, web search & deep thinking…
Chat Loading DotsLobe UI · React
AI AttachmentKokonut UI · ReactA file dropped into the chat uploads, then the assistant reads it page by page. Page citations in the answer light up…
Canvas CursorCursify · React
Agent ActivitybeUI · ReactRenders progressive agent work as message content.
Fluid OrbRare UI · ReactAn animated WebGL orb with drifting fluid shading. Supports size and color props.
Agent StepsSpectrum UI · ReactA timeline of tool calls with status, arguments, results, and parallel sub-steps.
Fallback AvatarSpell UI · ReactA unique gradient avatar generated from a name string.
Input MessageFluid Functionalism · ReactChat-style message composer with auto-resizing textarea, drag-and-drop file attachments (PNG / JPEG / PDF), flexible…
OrbUser Interface Wiki · React
Ai InputPanel UI · React NativeA prompt composer: a field that grows to five lines, a row of controls, and the sheet they open.
Pricing 01 - Startup Pricing PlansShadcn Space · ReactA clean two tier pricing section with feature comparison, highlighted plans, and strong CTAs, suited for agencies…
Voice Assistant WidgetOpenSourceUI · React
Prompt Boxuselayouts · ReactA collapsed chat composer that expands into a textarea with a model menu and send control.
Agent HandoffKinetics · HTML/CSSOne agent hands the live context to the next along a trace
Spell Fallback AvatarAnimations (Svelte) · Svelte
ShimmerAI Elements (Svelte) · SvelteA text shimmer utility component with configurable spread and duration.
Text StreamObsidianUI · ReactA continuous vertical text stream changes speed and direction with your scroll.
ChatGPT ThinkingNotra · ReactThe shimmering Thinking placeholder.
Deployment ChecklistGreatUI · React
AI InputNexvyn UI · ReactAI composer textarea with auto-grow, send/stop button morph, attachment slots, and Enter-to-send.
Image LoaderGenerative Loaders · React
Ai Bot AvatarAI CSS · ReactAn animated AI bot avatar that follows the cursor with its eyes, blinks and reacts to attention.
ORB-01ShaderCN · Reactcut-glass orb with a dispersive, turbulent interior
Live Orb23rd.dev · ReactAn evenly lit sphere with two capsule eyes that follow the pointer: white, black, webgl, and custom variants.
Voice Chat DisclosureWatermelon UI · React
Chat threadArc Library · ReactA chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.
Chat ThreadUI Lab · ReactReplies arrive after a beat of typing, and the thread follows only if you are.
AttachmentHextaUI · ReactFile and image cards for uploads, with progress, states, actions, a full-card trigger and names that keep their…
Voice ButtonLocalMode · ReactA press-to-record / release-to-transcribe push-to-talk button with an explicit visual state machine: idle -> recording…
Agent stateCojeev UI · ReactA sculpted, living status field that changes contour and color as an agent thinks, works, asks for input, or finishes.
Vanish InputVelora UI · ReactSearch field whose placeholder cycles while empty.
Agent GlyphHalaska UI · React
Prompt ComposerPin UI · React
AI composerMetal UI · React + SwiftUIA chat block: a composer that grows, attachments, a model choice, and replies that stream in word by word with stop…
Ai Chat WorkspaceSpaceUI · ReactFull-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time…
AI Chat BoxSkecher UI · ReactA polished AI prompt composer with model controls, attachments, and animated interaction states.
Agent Loading StatesEaseUI · ReactThree loading states for AI interfaces: shimmering status text, live agent progress, and cycling reasoning phrases.
Glass MessageOpaline · ReactChat bubbles on glass: tinted for you, clear for them, with avatars, meta and a typing indicator.
AI Answer 03ReactFrame · ReactAn agent-style AI answer card, a researching/reading/writing step tracker with a progress rail, markdown-style bold…
Image Generation LoaderAceternity UI · React
Prompt BarReact Bits · ReactChat composer with an @ sources menu, a / commands menu, a model picker, dictation and attachments, whose send tile…
Reasoning Streamtransitions.dev · HTML/CSS- Thinking OrbsLibraries.dev · ReactDotted thought-orb loading indicators for AI & agent UIs — nine tuned states, two sizes, auto dark/light
Streaming reply with a pending stateReUI · ReactOne assistant row moving from thinking, to typing, to settled.
Button MicrophoneAmicro Micro Transitions · React
AI Conversation BranchesKokonut UI · ReactA chat where editing a message starts a new branch. A small tree beside it shows every version, and you can jump…
Smooth Wavy CanvasCursify · React
Agent DisclosurebeUI · ReactShared transform-only reveal for collapsible agent content.
Grid RevealRare UI · ReactA loading state for AI images that turns into the real picture when it arrives.
AI Chat CardSpectrum UI · ReactAn AI chat card that types prompts into its composer, with send, attach and reset actions.
Queued message stackFluid Functionalism · ReactSonner-style stack of queued composer messages: collapsed cards fan out on hover (tap on touch), drag to reorder, a…
Image GenerationPanel UI · React NativeThe place an image will be, while it is being made.
Hold To TalkKinetics · HTML/CSSA live waveform blooms while you hold, then commits on release
Claude CodeNotra · ReactA Claude Code terminal session with the compact header, tool calls, a running turn and the prompt, built from the…
Bars ThemeNexvyn UI · ReactA traveling-wave bars visualization with 5 vertical bars sharing a sine-wave frequency, evenly phase-shifted left to…
Inline LoaderGenerative Loaders · React
Voice ChatAI CSS · ReactA voice chat screen for an AI assistant: listening state, live waveform, transcript and voice settings.
ORB-02ShaderCN · Reactornate scrollwork on a rolling dome
Email Typo FixUI Lab · ReactCatches gmial.com and fixes it by moving only the letters that were wrong.
Voice OrbLocalMode · ReactAn animated Canvas 2D voice-agent orb/visualizer that reflects discrete agent states…
OrbHalaska UI · React
Preview CardSpaceUI · ReactDisplays an informative preview card when users hover over a link, giving them a summary of the linked page before…
AI OrbSkecher UI · ReactAn interactive Three.js orb for AI assistants, voice interfaces, and ambient status surfaces.
Prompt InputEaseUI · ReactA chat composer that grows with its content, submits on Enter, and crossfades its send button into a stop button while…
AI AsistantReactFrame · ReactA dotted status light with two layouts, Mesh grid and Halo rings, across three animated states (Waiting, Listening…
Placeholders And Vanish InputAceternity UI · React
Voice PillReact Bits · ReactMic button that swells into a tinted capsule of level-driven equalizer bars and an elapsed clock while held or…
Streaming Texttransitions.dev · HTML/CSS- Voice GlowLibraries.dev · ReactSound-reactive glow for React — a centered, colorful beam along the bottom edge that rises and blooms with voice…
Chat turn with sourcesReUI · ReactAn assistant reply whose SQL queries fold into one summary above the answer, with the dashboards it cited below.
AI Inline CitationsKokonut UI · ReactAn answer with source chips beside each claim. One preview glides between chips and lights up the sentence it backs.
Ai SidebarbeUI · ReactComposes the shell with editable projects, folders, files, and bookmarks.
Matrix OrbRare UI · ReactA dot-matrix orb that animates through idle, listening and thinking states.
Approval CardSpectrum UI · ReactA human-in-the-loop approval for an action an agent wants to take.
Thinking IndicatorFluid Functionalism · ReactAnimated loading indicator with morphing SVG path (circle to infinity loop) and shimmer text rotation. Cycles through…
PlanPanel UI · React NativeWhat an agent intends to do, before it does it.
Prompt ComposerKinetics · HTML/CSSAn AI input grows with the thought, then commits to a run
Claude Code PromptNotra · ReactThe input between two rules with the permission mode, PR link and effort below.
Fluid OrbNexvyn UI · ReactA WebGL fluid orb in muted/neutral design tokens with sphere normals, fBm noise, and audio-reactive pulse.
Text LoaderGenerative Loaders · React
Message ActionsAI CSS · React
ORB-03ShaderCN · Reacta turbulent belt of light girdling the ball, contoured in rainbow
Voice OrbUI Lab · ReactA glassy orb of drifting mist that listens to your real mic, thinks in a slow swirl and breathes as it speaks.
ResponseLocalMode · ReactStreaming markdown renderer for assistant output: shows a cursor while streaming, tolerates partial/unterminated…
Streaming Answer PatternHalaska UI · React
Preview Link CardSpaceUI · ReactDisplays an interactive card preview of a website with its thumbnail, title, and domain name when shared or hovered.
Streaming TextSkecher UI · ReactA soft word-by-word text reveal for hero copy, onboarding, and editorial interfaces.
Streaming ResponseEaseUI · ReactWraps a response with the actions people expect once it settles: copy, replay, share, a thumbs up or down, and a list…
AI Edit ReviewReactFrame · ReactAn AI text editor that rewrites a selected passage, streams a word-level diff review with accept/reject actions, and…
Thinking Statestransitions.dev · HTML/CSS- Voice RingLibraries.dev · ReactVoice-reactive ring of light for React: a glassy spectrum that bends with the voice, takes the colour of its emotion…
Answer with citationsReUI · ReactNumbered citations in a research answer open the sources and move focus to the cited source.
AI ConnectKokonut UI · ReactA tool call that stops because an app is not connected. Connect it right in the message, and the call picks up where…
Approval CardbeUI · ReactCollects structured human input during a paused run.
Ask Docs FooterSpectrum UI · ReactA docs question box that streams a cited answer, over link columns.
Thinking StepsFluid Functionalism · ReactCollapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Radix flavor.
ReasoningPanel UI · React NativeThe model's working, shown while it happens and folded away after.
Token StreamKinetics · HTML/CSSTokens cascade in like a live model response
Claude Code ThinkingNotra · ReactThe dim "∴ Thinking…" line that expands to the thoughts.
Glow OrbNexvyn UI · ReactA WebGL fbm-noise glow orb with state-driven colors, volume-responsive scale and glow, idle and connecting pulse…
OrbAI CSS · React
ORB-04ShaderCN · Reacta hollow shell of light, faceted by a voxel lattice
Streaming TextHalaska UI · React
ThinkingSpaceUI · React9 procedural Canvas 3D particle loader orbs representing AI cognitive states — working, searching, solving, listening…
Streaming TextEaseUI · ReactReveals a model response as it streams in, fading each newly arrived word in on its own without replaying what's…
AI Image Loader 03ReactFrame · ReactAn AI image-generation loader, canvas-drawn rolling topographic lines grow in and a top-to-bottom sweep reveals the…
AI Context MeterKokonut UI · ReactHow full the context window is, as a ring in the prompt footer that opens a breakdown by source and compacts when it…
Attachment UploadbeUI · ReactA mixed attachment workspace with a dropzone, staggered file and image rows, animated upload, success, failure, retry…
Chat Empty StateSpectrum UI · ReactA first-run greeting with staggered suggestion chips.
Thinking StepsFluid Functionalism · ReactCollapsible AI reasoning steps with animated expand/collapse, per-step icons, sources, and nested details. Base UI…
Scroll CanvasPanel UI · React NativeImage frame whose contents move as you scroll.
Claude ThinkingNotra · ReactThe animated spinner and rotating verb Claude shows before replying.
Reasoning EffortAI CSS · React
Libraries with Animated ai element components
Related categories
- AI Element Components
- React AI Element Components
- Tailwind CSS AI Element Components
- Svelte AI Element Components
- shadcn/ui AI Element Components
- Animated AI Orb Components
- Animated Thinking Indicator Components
- Animated Prompt Input Components
- Animated Streaming Text Components
- Animated Voice Input Components
- Animated Conversation Components
- Animated Generated Image Components
- Animated Tool Call Components
- Animated Reasoning Components
- Animated Suggestions Components
- Animated Task Queue Components