Hero Calculus

A large illustrative SVG for calculus / gradient-descent topics. Draws a smooth loss curve, a glowing ball at a configurable point along the descent, and a dashed tangent line through it. Use it as a hero panel for a module, a section header, or anywhere a single image needs to say "wrongness has a direction."

Customize

Hero

size360px

progress1.00

accentaccent

Installation

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

Usage

import { HeroCalculus } from "@craft-bits/core";
 
<HeroCalculus size={400} />
<HeroCalculus size={320} progress={0.4} accentColor="#4A7BF7" />

Understanding the component

Single inline SVG. One <svg viewBox="0 0 400 280"> paints the curve, glow, area fill, tangent, and ball. No external image assets, no per-instance state.
Configurable descent. The progress prop in [0, 1] slides the ball from the high left side of the curve down to the minimum. Wire it to scroll, hover, or a spring — or leave it at the default of 1 for the resting composition.
Theme-aware colors. accentColor defaults to the --cb-accent token and ballColor falls back to the warning token. Override with any CSS color (hex, currentColor, a CSS variable, etc.).
Decorative by default. aria-hidden='true' ships out of the box. Pass aria-label to make it an annotated image instead.

Variants / Examples

// Start of descent — ball near the top of the curve.
<HeroCalculus size={400} progress={0} />
 
// Mid-descent — useful for a "we're learning" beat.
<HeroCalculus size={400} progress={0.5} />
 
// Custom palette.
<HeroCalculus
  size={400}
  accentColor="var(--cb-accent-strong)"
  ballColor="#F5C26B"
/>

Props

Prop	Type	Default	Description
`size`	`number`	`400`	Pixel width. Height scales to the 400×280 viewBox.
`progress`	`number`	`1`	Ball position along the descent in `[0, 1]`. `0` is the starting point, `1` rests near the minimum.
`accentColor`	`string`	`var(--cb-accent)`	Curve / glow / area-fill color.
`ballColor`	`string`	warning token	Ball + halo color.
`aria-label`	`string`	—	If set, the SVG becomes `role='img'` with this label. Otherwise it is decorative.
`className`	`string`	—	Extra classes merged onto the root SVG.

Accessibility

Decorative by default (aria-hidden='true'). When the glyph carries meaning on its own (e.g. as the only content of a hero panel), pass aria-label and the component switches to role='img'.
No motion. Reduced-motion users see the same composition — there is nothing to short-circuit.
All colors route through props or CSS variables, so contrast tracks the surrounding theme and inherits any prefers-contrast overrides applied site-wide.

Credits

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