craftbits*

Hero Regularization

A large illustrative hero SVG that contrasts overfitting with regularization: two side-by-side 3-3-2 fully-connected networks. The left network blazes with every connection lit (overfit, warm). The right network re-rolls a fresh dropout mask each cycle, fading random connections and dimming a hidden node so it visibly simplifies.

Customize
Hero illustration
400px
accent

Installation

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

Usage

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

Understanding the component

  1. One inline SVG, looping storyboard. A single <svg viewBox="0 0 400 280"> paints every frame. One useEffect drives the full cycle: entrance fade, both networks blaze, right network drops random connections, labels appear, right network resets, loop with a fresh dropout pattern. Every timer is cleaned up on unmount.
  2. Motion values, not re-renders. Per-node glow and per-connection opacity for both networks are driven by useMotionValue and useSpring — the React tree never re-renders during the cycle. Springs come from @craft-bits/core/motion (SPRINGS.gentle for connections, SPRINGS.bouncy for node glows).
  3. Hydration-safe randomness. Math.random() is only called inside useEffect, so SSR and the first paint render a deterministic empty frame; the dropout mask is rolled client-side after mount.
  4. Theme-driven color. The overfit (left) network uses var(--cb-warning, currentColor) so it always reads as a hot pole. The regularized (right) network uses the accentColor prop (default currentColor), so any text-cb-* utility on a parent tints the calm side.
  5. Reduced-motion safe. When prefers-reduced-motion: reduce is set, the loop short-circuits to a static frame: left network fully lit, right network with a fixed dropout mask already applied, both labels visible.

Variants / Examples

// Compact thumbnail.
<HeroRegularization size={240} />
 
// Explicit accent color.
<HeroRegularization size={480} accentColor="var(--cb-success)" />
 
// Custom hex.
<HeroRegularization accentColor="#4A7BF7" />

Props

PropTypeDefaultDescription
sizenumber400Pixel width. Height is computed from the 400×280 aspect ratio.
accentColorstring'currentColor'Any CSS color. Tints the regularized network: its nodes, kept connections, atmospheric glow, and label.
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 frame with the dropout mask already applied.
  • All colors flow from currentColor, the --cb-warning token, and the accentColor prop, so contrast tracks the consumer's theme — no hardcoded hex values.

Credits

  • Extracted from: craftingattention (app/src/lessons/primitives/chrome/icons/heroes/HeroRegularization.tsx).
  • Inspiration: the canonical "memorising the exam isn't learning" framing for dropout / regularization, with side-by-side networks before and after.