AI Waveform Chat

AI chat bubble with animated waveform states. Features thinking, speaking, and idle states with auto-rotation and smooth state transitions.

Refresh preview

Copy CLI command

Props

Property	Type	Default	Description
states	Array<'thinking' \| 'speaking' \| 'idle'>	['thinking', 'speaking', 'idle']	Array of states to cycle through.
messages	{ thinking: string; speaking: string; idle: string }	{ thinking: '', speaking: 'I'm generating that analysis for you now...', idle: 'Here is the summary of your meeting.' }	Messages for each state.
autoRotate	boolean	true	Whether to automatically rotate through states.
rotateInterval	number	3000	Interval in milliseconds between state rotations.
className	string	undefined	Additional CSS classes for custom styling.
aiName	string	"AI"	Name of the AI displayed in the status.

Glassmorphism mega menu with noise textures and blur effects for a cosmic aesthetic.

Cyberpunk-inspired mega menu with glitch effects and neon aesthetics.

Neo-brutalist mega menu with bold typography and high contrast design.

Built something cool?

Share your work with 10k+ devs — or tell us how we can improve.