DesignLayer
Latency Heat Card
Back to components
What is this?
A dark latency card with one row per region (US, EU, APAC by default). Bars grow to their millisecond values when the card comes into view, the numbers count up beside them, and each bar is tinted green, amber, or red by speed. Swap the regions, values, and thresholds, then drop it into an infrastructure, CDN, or edge feature block.
Component
Latency Heat Card
A dark latency card with one row per region (US, EU, APAC by default). Bars grow to their millisecond values when the card comes into view, the numbers count up beside them, and each bar is tinted green, amber, or red by speed. Swap the regions, values, and thresholds, then drop it into an infrastructure, CDN, or edge feature block.
Checking access…
Live PreviewVerified Technical Spec
- Animation
- CSS / Tailwind
- Reduced motion
- Verified
- Keyboard focus
- Not detected in source
- Compatibility
- Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible
Included
- Copy source into Cursor or Claude for agent install
- Finished React · TypeScript · Tailwind CSS UI
Dependencies
- React 19.0.0
- Typescript 5.7.2
- Tailwindcss 3.4.16
Tech Stack
- React
- TypeScript
- Tailwind CSS
Version 1.0.0