# Dynamic AI Composer > A shape-shifting AI input capsule that morphs between text, voice, thinking, and streaming states. A shadcn/ui block from the [@uicapsule](https://uicapsule.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uicapsule/dynamic-ai-composer). - Page, with a live preview: https://shadcn.exchange/r/uicapsule/dynamic-ai-composer - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uicapsule/dynamic-ai-composer-light-e5bc7c36fdece4da.png - Registry item: https://uicapsule.com/r/dynamic-ai-composer.json - Categories: controls - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://uicapsule.com/r/dynamic-ai-composer.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react`, `motion` ## Files ### `/dynamic-ai-composer.tsx` ```tsx "use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { ArrowUp, Check, Mic, Plus, Sparkles, X } from "lucide-react"; import { AnimatePresence, motion, useAnimate } from "motion/react"; import type { Transition } from "motion/react"; type Mode = "idle" | "input" | "listening" | "thinking" | "responding"; interface Exchange { prompt: string; words: { id: string; text: string }[]; } const VOICE_PROMPTS = [ "What makes a voice interface feel alive?", "How should an input morph between states?", ] as const; const RESPONSES = [ "Great voice UI breathes with you. The waveform should track real amplitude, the container should swell slightly as you speak, and silence should feel like the interface leaning in — not a dead sensor waiting for a timeout.", "One container, many shapes. Keep the border radius continuous, crossfade contents through a light blur, and let a spring drive every size change so each state feels like the same object stretching, never a cut between screens.", "Morphing earns trust when nothing teleports. Anchor the capsule in place, animate width and height from the same origin, and stagger content in a beat after the container settles so the shape reads first and the details second.", ] as const; const SPRING: Transition = { bounce: 0.3, duration: 0.55, type: "spring" }; const WIDTHS = { idle: "w-[260px]", input: "w-[min(400px,calc(100vw-48px))]", listening: "w-[300px]", responding: "w-[min(420px,calc(100vw-48px))]", thinking: "w-[200px]", } satisfies Record; const pickIndex = (length: number) => Math.floor(Math.random() * length); const BAR_COUNT = 21; const ListeningWave = () => (
{Array.from({ length: BAR_COUNT }, (_, index) => { const envelope = 0.3 + 0.7 * Math.sin((index / (BAR_COUNT - 1)) * Math.PI); const wobble = 0.45 + (Math.sin(index * 12.9898) * 0.5 + 0.5) * 0.55; return ( ); })}
); const ThinkingSweep = () => (
); export const DynamicAiComposer = () => { const [mode, setMode] = useState("idle"); const [draft, setDraft] = useState(""); const [exchange, setExchange] = useState(null); const [streamedCount, setStreamedCount] = useState(0); const [elapsed, setElapsed] = useState(0); const [scope, animateShake] = useAnimate(); const textareaRef = useRef(null); const timeoutsRef = useRef(new Set>()); // Timers are tracked so unmount can cancel the in-flight stream; each one drops // itself from the set as it fires so a long session cannot accumulate dead ids. const queue = useCallback((task: () => void, delay: number) => { const id = setTimeout(() => { timeoutsRef.current.delete(id); task(); }, delay); timeoutsRef.current.add(id); }, []); useEffect(() => { const timeouts = timeoutsRef.current; return () => { for (const id of timeouts) { clearTimeout(id); } }; }, []); useEffect(() => { if (mode === "input") { textareaRef.current?.focus(); } }, [mode]); useEffect(() => { if (mode !== "listening") { return; } const interval = setInterval(() => { setElapsed((previous) => previous + 1); }, 1000); return () => clearInterval(interval); }, [mode]); const submit = useCallback( (prompt: string) => { const response = RESPONSES[pickIndex(RESPONSES.length)]; if (!response) { return; } const words = response.split(" ").map((text) => ({ id: crypto.randomUUID(), text })); setExchange({ prompt, words }); setStreamedCount(0); setMode("thinking"); queue(() => { setMode("responding"); const step = (index: number) => { setStreamedCount(index + 1); if (index + 1 < words.length) { queue(() => step(index + 1), 60 + ((index * 37) % 60)); } }; queue(() => step(0), 250); }, 1500); }, [queue], ); const handleSend = useCallback(() => { const prompt = draft.trim(); if (!prompt) { animateShake(scope.current, { x: [0, -10, 10, -6, 6, 0] }, { duration: 0.4 }); return; } setDraft(""); submit(prompt); }, [animateShake, draft, scope, submit]); const handleVoiceConfirm = useCallback(() => { const prompt = VOICE_PROMPTS[pickIndex(VOICE_PROMPTS.length)]; if (!prompt) { return; } submit(prompt); }, [submit]); const reset = useCallback(() => { setExchange(null); setStreamedCount(0); setMode("idle"); }, []); const isStreamDone = exchange !== null && streamedCount >= exchange.words.length; // The gradient glow marks activity: every state change fires one pulse, and // loading states (thinking, streaming a response) keep pulsing until done. const isLoading = mode === "thinking" || (mode === "responding" && !isStreamDone); const glowKey = `${mode}-${isLoading ? "loading" : "settled"}`; const content = (() => { switch (mode) { case "idle": { return (
); } case "input": { return (