craftbits*

Hero Evaluation

A large illustrative hero SVG for evaluation-metrics explainers — a good ROC curve builds step-by-step with its AUC area filling and a counter ticking up, a worse model overlays for dramatic contrast, and a TP/FP/FN/TN confusion-matrix legend pops in. Theme-driven via currentColor + configurable accentColor and warnColor props; reduced-motion users see the final state instead of the loop.

Customize
Hero illustration
400px
accent

Installation

npx shadcn@latest add https://craftbits.dev/r/hero-evaluation.json

Usage

import { HeroEvaluation } from "@craft-bits/core/svg/hero-evaluation";
 
<HeroEvaluation size={400} />
 
// Tint via the parent text color (drives the good curve / AUC fill).
<div className="text-cb-accent">
  <HeroEvaluation />
</div>

Understanding the component

  1. Continuous storyboard. A single useEffect schedules the full ~9s cycle: axes + diagonal baseline, good ROC curve draws, AUC area fills, good AUC counter ticks up to 0.92, worse model curve + fill overlay, worse AUC counter ticks up to 0.61, confusion-matrix legend pops in (staggered), good fill pulse, fade out, reset, loop. Every timer is cleaned up on unmount and when reduced-motion changes.
  2. Motion values, not re-renders. Curve pathLength, fill opacity, readout opacity, and per-cell legend opacity are all driven by motion's useMotionValue + useSpring so the React tree never re-renders during the loop. Springs come from @craft-bits/core/motion (SPRINGS.smooth, SPRINGS.slow, SPRINGS.bouncy, SPRINGS.snap).
  3. Theme-driven color. Axes, baseline, tick marks, axis labels, and caption all use currentColor, so any text-cb-* utility tints the chrome. The accentColor prop tints the good ROC curve, its AUC fill, and its readout; the warnColor prop tints the worse curve and its readout — both accept any CSS color (including var(--color-accent-500)).
  4. Reduced-motion safe. When prefers-reduced-motion: reduce is set, the loop short-circuits to the static end state — both curves drawn, both AUC readouts visible (0.92 and 0.61), confusion-matrix legend filled in. No timers, no animate() calls.

Variants / Examples

// Compact thumbnail.
<HeroEvaluation size={200} />
 
// Explicit accent + warn colors.
<HeroEvaluation
  size={480}
  accentColor="var(--color-accent-300)"
  warnColor="var(--color-warn-500)"
/>
 
// Custom hex.
<HeroEvaluation accentColor="#8b5cf6" warnColor="#ef4444" />

Props

PropTypeDefaultDescription
sizenumber400Pixel width. Height is computed from the 400×280 aspect ratio.
accentColorstring'currentColor'Any CSS color. Tints the good ROC curve, AUC fill, and AUC readout.
warnColorstring'#f59e0b'Any CSS color. Tints the worse ROC curve, its AUC fill, and AUC readout.
classNamestring—Extra classes merged onto the root <svg>.
...restSVGAttributes<SVGSVGElement>—Other SVG props forwarded to the root.

Accessibility

  • The root <svg> carries aria-hidden="true" — the illustration is decorative; pair it with a visible heading or caption in its surrounding context.
  • Motion respects prefers-reduced-motion: reduce: the loop short-circuits and renders the final state.
  • Chrome flows from currentColor, so contrast tracks the consumer's text tokens — no hardcoded hex values for chrome.

Credits

  • Extracted from: craftingattention (app/src/lessons/primitives/chrome/icons/heroes/HeroEvaluation.tsx).
  • Inspiration: classic ROC + AUC illustrations — "know whether you are actually better."