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.
• The animation uses 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.