Activation Zoo

Pick an activation function and see it plotted alongside its analytical derivative. A draggable x-indicator returns f(x) and f'(x) at any point — exactly what a forward / backward pass computes for a single neuron.

ReLU + derivativef(0.00) = 0.000 f'(x) = 0.000

Customize

Function

activationReLU

Indicator

x0.00

Display

derivative

Installation

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

Usage

import { ActivationZoo } from "@craft-bits/core";
 
<ActivationZoo defaultActiveActivation="ReLU" />

Restrict the picker and control the indicator from outside:

const [x, setX] = useState(0);
 
<ActivationZoo
  activations={["ReLU", "GELU"]}
  xIndicator={x}
  onXIndicatorChange={setX}
  range={[-3, 3]}
/>

Understanding the component

Seven built-in activations. ReLU, Sigmoid, Tanh, GELU, Softplus, LeakyReLU, Identity. Each one defines both f(x) and an analytical df(x) — GELU uses the exact derivative of the tanh-approximation GPT ships with, so the gradient curve matches what a real training run computes.
Auto-scaled y-axis. The plot pre-samples every selectable activation across the visible range and grows the y extents to fit all of them. Switching activations never crops the curve.
Two curves on one chart. Solid line is f(x) in the accent color; dashed line is f'(x) in a subtle tone. Sharing one y-axis makes the gradient's magnitude directly comparable to the output.
Spring transitions between activations. Curves morph with SPRINGS.smooth from @craft-bits/core/motion. Reduced-motion users snap instantly.
Draggable x-indicator. A capture-anywhere transparent rect drives setPointerCapture so dragging keeps tracking when the pointer leaves the plot. Arrows nudge 1% of the range; Shift+Arrow nudges 5%; Home / End jump to the edges.
Controlled and uncontrolled, twice. Both activeActivation and xIndicator can be controlled (pair with onActiveActivationChange / onXIndicatorChange) or left to internal state (defaultActiveActivation / defaultXIndicator).

Props

Prop	Type	Default	Description
`activations`	`readonly ActivationName[]`	all seven built-ins	Subset of activations the picker exposes.
`activeActivation`	`ActivationName`	—	Controlled selection. Pair with `onActiveActivationChange`.
`defaultActiveActivation`	`ActivationName`	first of `activations`	Uncontrolled initial selection.
`onActiveActivationChange`	`(name: ActivationName) => void`	—	Fires on every selection change.
`showDerivative`	`boolean`	`true`	Overlay the dashed `f'(x)` curve.
`xIndicator`	`number`	—	Controlled indicator position. Pair with `onXIndicatorChange`.
`defaultXIndicator`	`number`	midpoint of `range`	Uncontrolled initial indicator.
`onXIndicatorChange`	`(x: number) => void`	—	Fires on drag / keyboard nudge.
`range`	`readonly [number, number]`	`[-4, 4]`	Visible x-axis domain.
`transition`	`Transition`	`SPRINGS.smooth`	Spring for both curve morphs and indicator follow.
`className`	`string`	—	Merged onto the root `<div>` via `cn()`.

Accessibility

The chart is role="img" with an aria-labelledby heading that names the active activation.
The drag surface is role="slider" with aria-valuemin / aria-valuemax / aria-valuenow reflecting the indicator.
Keyboard: ← / → nudge 1% of the range, Shift+← / Shift+→ nudge 5%, Home jumps to range[0], End to range[1].
An aria-live="polite" summary above the chart reads out f(x) and f'(x) whenever the indicator or activation changes.
The picker is a role="radiogroup" of role="radio" buttons, each tagged data-state="on" | "off".
Animation is fully disabled when prefers-reduced-motion: reduce is set — both the curve morph and indicator spring snap.

Credits

Extracted from: craftingattention (app/src/lessons/primitives/viz/ActivationZoo.tsx). Stripped the lesson-specific Predict / Explore modes and narration heuristics; generalized to a single primitive with controlled / uncontrolled state pairs and an open activations list. Added Identity and Softplus; replaced ELU's finite-difference derivative with the analytical form throughout.