Connection Error Shake
A more aggressive, persistent pulsing or shaking error state specifically denoting that a system failure or timeout occurred.
Live Demo
Connection Failed
We couldn't reach the server. Please check your internet connection or try again later.
What It Is
A more aggressive, persistent pulsing or shaking error state specifically denoting that a system failure or timeout occurred.
✓When to Use
- Failed API fetches on critical dashboard widgets
- Payment gateways failing to connect
✕When NOT to Use
- User-side validation errors (use Error Shake instead)
Configuration Tips
- 01Pair with a "Retry" button that has its own loading spinner state
- 02Apply a subtle red flash to the container border
You've Seen It In
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Create a widget error state that shows a softly pulsing red exclamation icon indicating the data failed to load.
Code Example (Tailwind CSS)
export function ConnectionErrorShakeDemo() {}Related Effects
Error Shake
A quick horizontal shaking motion applied to an element (like an input field) to indicate invalid input or an error, mimicking a head shake.
Offline State Indicator
A bar or toast that slides down from the top of the interface natively indicating the application has lost internet connection, remaining fixed until connection is restored.