craftbits*

Hero Autograd

A small DAG of inputs, ops, and a loss node that fades in, glows in the accent color from left to right (the forward pass), then reverses with a cooler dashed wave that surfaces the per-node gradient labels (the backward pass). Decorative by default.

Customize
Hero
320px
default

Installation

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

Usage

import { HeroAutograd } from "@craft-bits/core";
 
<HeroAutograd size={320} />

Understanding the component

  1. Single inline SVG, single loop. The whole illustration is one <svg viewBox="0 0 400 280">. A single setTimeout-driven runCycle schedules every wave (entrance, forward, backward, reset) and re-arms itself every 8 seconds.
  2. Spring-smoothed motion values. Every node and edge owns its own useSpring(useMotionValue(0)) for visibility, warm glow, cool glow, gradient-label opacity, forward edge activation, and backward edge activation. The cycle only writes target values — the springs handle the easing.
  3. Reduced-motion fallback. usePrefersReducedMotion() short-circuits the loop and renders the resting (revealed) state directly — no waves, no gradient labels mid-pulse.
  4. Themeable via two props. accentColor paints the forward wave and gradientColor paints the backward wave. Both default to CSS variables, so the component picks up your theme without explicit props.

Variants / Examples

// Larger hero for a landing-page section.
<HeroAutograd size={480} />
 
// Custom palette — paint the forward wave teal, the backward wave magenta.
<HeroAutograd
  size={360}
  accentColor="#14b8a6"
  gradientColor="#ec4899"
/>

Props

PropTypeDefaultDescription
sizenumber280Pixel width of the rendered SVG. Height tracks the 400:280 viewBox.
accentColorstring'var(--cb-accent, #f59e0b)'Forward-pass glow color. Accepts any CSS color.
gradientColorstring'var(--cb-accent-cool, var(--cb-accent, #8b5cf6))'Backward-pass glow color (also used for the gradient-label text).
classNamestring—Extra classes merged onto the root <svg>.
aria-labelstring—If set, the SVG is treated as a labeled image; otherwise it renders as decorative (aria-hidden).

Accessibility

  • Decorative by default (aria-hidden="true" when no aria-label is provided). Screen readers skip it.
  • Pass aria-label="…" to promote the SVG to role="img" with a name.
  • Respects prefers-reduced-motion — the animation loop is skipped and the graph renders in its resting state.

Credits

  • Extracted from: craftingattention (app/src/lessons/primitives/chrome/icons/heroes/HeroAutograd.tsx).