Now I'll create the hook, the typing indicator component, and a demo page to showcase it.
Now I'll add the keyframe animation to globals.css and update the Tailwind config, then create a demo page.
Here's what I built:
hooks/use-typing-indicator.ts — A minimal hook that manages typing state (isTyping, startTyping, stopTyping, toggleTyping) and exposes configurable options for dotCount, cycleDuration, and staggerDelay.components/typing-indicator.tsx — A tiny presentational component that renders the bouncing dots using a CSS @keyframes animation with staggered animation-delay per dot, keeping it purely CSS-driven with no JS timers.translateY(-6px) for the bounce and opacity fading (0.4 → 1) to give each dot a subtle pulse, with each dot offset by 150ms to create the classic cascading wave effect.Added a minimal callout below the typing indicator demo with the message "You can rest now, Kai" styled as italic muted text inside a subtle bordered container, keeping it consistent with the existing design tokens.
You can send messages while the preview loads