Activation Curve Inline

Inline activation-function explorer designed to sit in prose flow. No widget chrome, no borders on the plot — just the curves, a draggable vertical probe, and a thin row of readout cards.

Plots one or more of six built-in activations (ReLU, Sigmoid, Tanh, LeakyReLU, ELU, GELU) on a shared axis with an optional dashed derivative overlay, optional dead-zone (|f′(x)| < 0.005) and saturation-zone (0.005 ≤ |f′(x)| < 0.1) washes, and a draggable probe that springs to the pointer and reads out f(x) and f′(x) per function.

ReLU

f(0.0) = 0.0000

f′(0.0) = 0.0000

Customize

Functions

ReLU

Sigmoid

Tanh

LeakyReLU

ELU

GELU

Overlays

show derivative

highlight dead zone

highlight saturation

Probe

initial x0.0

Installation

npx shadcn@latest add https://craftbits.dev/r/activation-curve-inline.json

Usage

import { ActivationCurveInline } from "@craft-bits/viz/activation-curve-inline";
 
<ActivationCurveInline functions={["ReLU"]} />

Compare two activations with their derivatives:

<ActivationCurveInline functions={["ReLU", "Sigmoid"]} showDerivative />

Teach the dying-ReLU phenomenon:

<ActivationCurveInline functions={["ReLU"]} showDerivative highlightDead />

Teach sigmoid saturation:

<ActivationCurveInline
  functions={["Sigmoid", "Tanh"]}
  showDerivative
  highlightSaturation
/>

Understanding the component

Six built-in activations. Each defines both f(x) and df(x) — five analytical, one (GELU) via central finite differences against the tanh approximation.
Shared axis. All selected functions render on the same x ∈ [−5, 5], y ∈ [−2, 4] plot at 200 samples each, with output clipped to the visible y-domain so the curve never escapes the frame.
Grid dots, not grid lines. Subtle 1px dots at integer ticks keep the plot visually quiet so the curves and probe dominate. The origin row gets brighter dots.
Probe spring. A useMotionValue tracks the raw pixel-x; useSpring against SPRINGS.snap produces the visible position. Drag updates the raw value; the spring chases.
Dead / saturation washes. When enabled, the component pre-scans the visible domain for the relevant gradient-magnitude band of each activation and renders a low-opacity rect over every contiguous span.
Per-curve glow. Each function has its own SVG glow filter so the curve hue carries an emissive halo without bleeding between functions.
Readout cards. A thin uppercase-mono label plus tabular-num values of f(x) (and f′(x) if enabled) per function. The current value transitions opacity on update so the eye registers the change.

Props

Prop	Type	Default	Description
`functions`	`readonly ActivationCurveInlineFnName[]`	—	One or more activations to plot.
`showDerivative`	`boolean`	`false`	Overlay the analytical `f′(x)` curve as a dashed line.
`initialX`	`number`	`0`	Initial probe position. Clamped to `[−5, 5]`.
`highlightDead`	`boolean`	`false`	Wash the SVG red wherever `\|f′(x)\| < 0.005`.
`highlightSaturation`	`boolean`	`false`	Wash the SVG amber wherever `0.005 ≤ \|f′(x)\| < 0.1`.
`caption`	`ReactNode`	—	Caption rendered below the readout cards.
`transition`	`Transition`	`SPRINGS.snap`	Override the spring used by the probe and value dots.
`onXChange`	`(x: number) => void`	—	Fires on every probe move (drag or keyboard).
`className`	`string`	—	Merged onto the root via `cn()`.

Accessibility

The plot SVG is role="img" with an aria-label listing the selected functions and current probe position.
The drag surface is role="slider" with aria-valuemin / aria-valuemax / aria-valuenow / aria-valuetext reflecting the probe.
Keyboard: ← / → nudge by 0.1, Shift+← / Shift+→ nudge by 0.5, Home / End jump to the bounds.
Decorative shapes (grid dots, washes, dashed lines, value labels, legend) are tagged aria-hidden.
Colour is never the only signal — the readout cards print the numeric values in tabular monospace.
Motion respects prefers-reduced-motion: reduce automatically — useSpring from motion/react snaps to target instead of animating.

Credits

Extracted from: craftingattention (app/src/lessons/primitives/viz/ActivationCurveInline.tsx). Dropped the lesson chrome (SvgLabel), remapped per-lesson palette tokens to var(--cb-*) semantic tokens so consumer themes repaint freely, swapped the project-local SPRINGS.snug for the canonical SPRINGS.snap, replaced ELU's hardcoded lesson colour with a token mix, added Home / End keyboard bounds, an onXChange callback, and a transition override prop.