Message spam

A morphing countdown ring that prevents message spam. Inspired by Telegram's slow mode.

How It Works

When a message is sent, the input enters a cooldown state. The ring around the send button represents the remaining time, while each digit of the countdown morphs independently.

The animation uses two techniques:

1. framer-motion springs for per-digit transitions
2. stroke-dasharray interpolation for the ring's progress

Accessibility

• The send button uses aria-disabled="true" during cooldown rather than the disabled attribute, so screen readers can still announce its label.
• aria-live="polite" on the countdown container announces the remaining time without interrupting other speech.
• Keyboard users see a focus indicator that matches the visual state.