Milestone Heroes

A thin presentational router that turns a stable milestone id into the right craft-bits hero illustration. Seventeen built-in ids cover the flagship lesson curriculum — vibe check, vectors, calculus, neural nets, autograd, loss, sequences, attention, inference, LoRA, optimizers, evaluation, CNNs, classical ML, regularization, modern architectures, init stability. Unknown ids fall through to a neutral placeholder, so a milestone surface can render the right hero without taking on knowledge of the full catalogue.

Installation

npx shadcn@latest add https://craftbits.dev/r/milestone-heroes.json

Usage

import { MilestoneHeroes } from "@craft-bits/edu";
 
<MilestoneHeroes id="attention-and-transformers" size={400} />

Tint via the parent text color — each underlying hero defaults to currentColor:

<div className="text-cb-accent">
  <MilestoneHeroes id="vibe-check" />
</div>

Pause every hero on the first frame, useful for thumbnails and OG images:

<MilestoneHeroes id="optimizers" paused />

Iterate the catalogue:

import { MilestoneHeroes, MILESTONE_HERO_IDS } from "@craft-bits/edu";
 
MILESTONE_HERO_IDS.map((id) => (
  <MilestoneHeroes key={id} id={id} size={240} />
));

Understanding the component

1. Pure router. The component does no rendering work of its own — it switches on id and forwards every other prop (accentColor, size, paused, className, plus any extra SVG attributes) to the matching @craft-bits/core/svg/hero-* component. Loop motion, the reduced-motion fallback, and hydration-safe defaults all live in the underlying heroes; this file stays small and side-effect-free.
2. Widened id type. id is MilestoneHeroId | (string & {}), so autocompletion still surfaces the seventeen built-in ids while consumers can pass an unknown id (a milestone authored upstream of the library) without TypeScript complaining. Unknown ids paint the neutral placeholder rather than crashing the tree.
3. Neutral placeholder. The placeholder mirrors the 400 by 280 viewBox of every real hero so layouts that reserve space for the illustration don't shift when the id is unknown. It uses var(--cb-bg-elevated) for the panel and the same accentColor for the dimmed ring and bright centre dot, echoing the "centre of attention" motif of the real heroes.
4. No motion of its own. Because every underlying hero already honours prefers-reduced-motion: reduce and exposes a paused prop, this router adds no animation work. The reduced-motion path is whatever the selected hero already paints.
5. Stable id catalogue. MILESTONE_HERO_IDS is exported as a readonly tuple in canonical order, so sidebar nav, demos, and consumers that want to iterate the full catalogue all share one source of truth.

Variants / Examples

// Explicit accent color.
<MilestoneHeroes id="loss-functions" accentColor="var(--cb-accent)" />
 
// Compact thumbnail.
<MilestoneHeroes id="evaluation" size={200} />
 
// Unknown id — renders the neutral placeholder.
<MilestoneHeroes id="not-yet-authored" size={320} />

Props

Accessibility

• The selected hero always carries aria-hidden="true" — every craft-bits hero is decorative. Pair it with a visible heading or caption so assistive tech still hears the milestone name.
• Motion follows the underlying hero. Every built-in hero honours prefers-reduced-motion: reduce and short-circuits its loop to a single static frame; paused forwards through for deliberate freezes.
• Color flows from currentColor plus the accentColor prop. No hardcoded hex lives inside the router — tint by setting the parent's text color (text-cb-accent, text-cb-fg-muted, etc.).
• The neutral placeholder uses var(--cb-bg-elevated) and the same accentColor, so it adapts to dark mode and respects user theming.

Credits

• Extracted from: craftingattention (app/src/lessons/primitives/chrome/icons/MilestoneHeroes.tsx). The source coupled directly to the Milestone["id"] discriminated union from @/content/paths; the library version widens the type to MilestoneHeroId | (string & {}) so the router stays usable outside that curriculum, and the placeholder is retoned from the lesson palette to cb-* semantic tokens.