craftbits*

Hero Loss

A large illustrative hero SVG that animates the "shape of loss" — three canonical loss curves (MSE, cross-entropy, hinge) plotted on shared axes while a vertical marker sweeps left to right. Live value labels track each curve, and a soft accent glow blooms on the right as cross-entropy diverges.

Customize
Hero illustration
400px
accent

Installation

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

Usage

import { HeroLoss } from "@craft-bits/core/svg/hero-loss";
 
<HeroLoss size={400} />
 
// Tint via the parent text color.
<div className="text-cb-accent">
  <HeroLoss />
</div>

Understanding the component

  1. One inline SVG, looping storyboard. A single <svg viewBox="0 0 400 280"> paints every frame. One useEffect schedules the full ~8.5s cycle: curves draw in, marker appears, sweeps right, holds at max error, returns to left, loops. Every timer is cleaned up on unmount.
  2. Motion values, not re-renders. Curve dash offsets, marker x, label positions, and the right-side glow are all driven by useMotionValue + useSpring — the React tree never re-renders during the cycle. Springs come from @craft-bits/core/motion (SPRINGS.slow for the sweep, SPRINGS.bouncy for the marker entrance).
  3. Theme-driven color. Axes, gridlines, labels, and the MSE curve flow from currentColor, so the host tints the whole illustration with any text-cb-* utility. The accentColor prop colors the cross-entropy curve, sweeping marker, value label, and explosion glow — any CSS color (including var(--cb-accent)). The hinge curve stays locked to var(--cb-success) so the trio remains perceptually distinct.
  4. Reduced-motion safe. When prefers-reduced-motion: reduce is set, the loop short-circuits to a static mid-error frame: curves fully drawn, marker parked at err = 0.5, label values reflecting that snapshot.

Variants / Examples

// Compact thumbnail.
<HeroLoss size={240} />
 
// Explicit accent color.
<HeroLoss size={480} accentColor="var(--cb-warning)" />
 
// Custom hex.
<HeroLoss accentColor="#f97316" />

Props

PropTypeDefaultDescription
sizenumber400Pixel width. Height is computed from the 400×280 aspect ratio.
accentColorstring'currentColor'Any CSS color. Tints the cross-entropy curve, marker, value label, and right-side explosion glow.
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 a static mid-error frame instead of looping.
  • All colors flow from currentColor and theme variables, so contrast tracks the consumer's text and accent tokens — no hardcoded hex values.

Credits

  • Extracted from: craftingattention (app/src/lessons/primitives/chrome/icons/heroes/HeroLoss.tsx).
  • Inspiration: the canonical "loss is the distance between right and wrong" diagram, with MSE / cross-entropy / hinge plotted side-by-side.