CortexcnCortexcn
Get started
Pro

Threat Shield

Inbound requests converging on a shield that scores every one, then fanning out to a card with the requests scored, a column chart of the last minutes stacked by verdict, and each verdict (allowed, challenged, blocked) counting up as pulses arrive.

Inbound requests through Shield to Last 15 minutesRequests scored in the last 15 minutes: 43,516. Allowed, Passed every rule: 41,870, 96 percent. Challenged, Asked to prove they're human: 1,284, 3 percent. Blocked, Matched a rule: 362, 1 percent.Inbound requests2,901 requests a minuteShieldScores every request{ } RulesLast 15 minutesLiveRequests scored43,516AllowedPassed every rule41,87096%ChallengedAsked to prove they're human1,2843.0%BlockedMatched a rule3620.8%Blocked requests never reach your app.Illustrative numbers

Installation

ProPart of Cortexcn Pro

The source for threat-shield comes with a Cortexcn Pro license, along with every other chart and the website templates. Pick a license on the pricing page.

Buy ProSee what is in Pro

Already have a license? Open the code

Usage

import { ThreatShield } from "@/components/threat-shield";
<ThreatShield
  title="Last 15 minutes"
  verdicts={[
    { name: "Allowed", detail: "Passed every rule", count: 41870, tone: "accent" },
    { name: "Challenged", detail: "Asked to prove they're human", count: 1284, tone: "warning" },
    { name: "Blocked", detail: "Matched a rule", count: 362, tone: "destructive" },
  ]}
/>

Each verdict gets a row with its count and share, and a band in every column of the chart. Use it on the page for a firewall, bot protection, rate limiting, or sign-in security, to show what reaches the app and what is stopped.

Examples

Sign-in checks

The same shield checking sign-in attempts over the last hour.

Sign-in attempts through Shield to Last hourSign-ins checked in the last hour: 9,699. Signed in, Known device and password: 8,640, 89 percent. Verified, Asked for a one-time code: 912, 9 percent. Locked, Too many failed tries: 147, 2 percent.Sign-in attempts647 requests a minuteShieldChecks every sign-in{ } RulesLast hourLiveSign-ins checked9,699Signed inKnown device and password8,64089%VerifiedAsked for a one-time code9129.4%LockedToo many failed tries1471.5%Locked accounts get a reset email.Illustrative numbers

Static

With animated={false}, nothing moves and the counts stay as given.

Inbound requests through Shield to Last 15 minutesRequests scored in the last 15 minutes: 43,516. Allowed, Passed every rule: 41,870, 96 percent. Challenged, Asked to prove they're human: 1,284, 3 percent. Blocked, Matched a rule: 362, 1 percent.Inbound requests2,901 requests a minuteShieldScores every request{ } RulesLast 15 minutesLiveRequests scored43,516AllowedPassed every rule41,87096%ChallengedAsked to prove they're human1,2843.0%BlockedMatched a rule3620.8%Blocked requests never reach your app.Illustrative numbers

Behavior

  • While the flow is on screen, pulses run from the left into the shield, then on to each verdict. The counts count up from zero, then each verdict adds its perPulse every time a pulse reaches it, and the newest column of the chart grows as they arrive.
  • tone colors a verdict's marker, its band in the chart, and, for "destructive", its count. "warning" and "destructive" use the theme's warning and destructive colors, so they follow light and dark mode.
  • The chart splits title's window into columns. Each column's height is a steady variation on the verdicts' average, the same on every render.
  • With reduced motion enabled, or off screen, nothing moves and every count shows its given value.
  • The whole flow is one SVG that scales to its container. It lays out at minWidth or wider (560px by default); in a narrower container it scrolls sideways and takes keyboard focus.
  • Screen readers hear the total, then each verdict's count and share.

Props

ThreatShield

PropTypeDefaultDescription
verdictsThreatShieldVerdict[]Three sample verdictsThe verdicts, in list and stacking order
titlestring"Last 15 minutes"The card's title, the window the numbers cover
totalLabelstring"Requests scored"The label over the total
columnsnumber15How many columns the chart splits title into
shieldNamestring"Shield"The name in the middle node
shieldCaptionstring"Scores every request"A line under the middle node
sourceLabelstring"Inbound requests"The label over the incoming lines
rateLabelstring"requests a minute"The words after the rate under the source label
apiLabelstring"Rules"The label on the lines into the card
notestring"Blocked requests never reach your app."A note at the foot of the card
captionstring"Illustrative numbers"A small label in the bottom-left corner
localestring"en-US"The locale numbers are written in
linesnumber22How many lines of traffic come in from the left
accentstring"var(--foreground)"Color of the pulses and of "accent" verdicts
animatedbooleantrueRun the pulses and count up while on screen
minWidthnumber560Narrowest layout width in pixels; below it, scroll
ariaLabelstring"Threat shield"Names the flow for screen readers
classNamestring-Extra classes on the frame

ThreatShieldVerdict

PropTypeDefaultDescription
namestring-The verdict, such as "Blocked"
detailstring-Why requests get it
countnumber-Requests that got it so far
tone"accent" | "warning" | "destructive""accent"Its color
perPulsenumber1Requests added each time a pulse reaches it while live