Derivative Explorer

Plot one of seven canonical functions and drag a marker along x. The tangent line at the marker is drawn through the point with slope f'(x); the analytical derivative is surfaced both on the chart and in the readout below. An optional secant overlay teaches the limit-of-secants definition of the derivative.

y = x²f(1.00) = 1.000 f'(x) = 2.000

x = 1.000f'(x) = 2.000

Customize

Function

functionx^2

Position

x1.00

Secant

show secant

ε0.50

Installation

npx shadcn@latest add https://craftbits.dev/r/derivative-explorer.json

Usage

import { DerivativeExplorer } from "@craft-bits/core";
 
<DerivativeExplorer defaultActiveFunction="x^2" defaultX={1} />

Control x and the active function from outside:

const [x, setX] = useState(1);
const [fn, setFn] = useState("sin(x)");
 
<DerivativeExplorer
  activeFunction={fn}
  onActiveFunctionChange={setFn}
  x={x}
  onXChange={setX}
  range={[-3, 3]}
/>

Show the secant line to teach the limit definition:

<DerivativeExplorer
  defaultActiveFunction="x^2"
  defaultX={1}
  showSecant
  secantEpsilon={0.5}
/>

Understanding the component

Seven built-in functions, each with analytical derivative. x², x³, sin(x), cos(x), eˣ, ln(x), 1/x. The derivative is the exact closed form — no finite-difference approximation — so the tangent reflects the true gradient at any x.
Auto-scaled y-axis. The plot pre-samples f(x) across the visible domain and grows the y extents to fit; y = 0 is always kept inside the frame.
Tangent line spans the visible domain. Drawn as a single segment from (xMin, f(x₀) + f'(x₀)(xMin − x₀)) to the equivalent at xMax. Dragging x slides the tangent's pivot along the curve.
Secant overlay. When showSecant is on, a dashed line connects (x, f(x)) to (x + ε, f(x + ε)). The readout surfaces both the secant slope and f'(x) so convergence as ε shrinks is observable.
Spring transitions. Function changes use SPRINGS.smooth; the tangent / marker follows pointer with SPRINGS.snap. prefers-reduced-motion: reduce collapses both to duration: 0.
Draggable x. 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 activeFunction and x can be controlled (pair with onActiveFunctionChange / onXChange) or left to internal state via defaultActiveFunction / defaultX.

Props

Prop	Type	Default	Description
`functions`	`readonly FunctionDef[]`	seven built-ins	Selectable function list.
`activeFunction`	`string`	—	Controlled active function (by `name`).
`defaultActiveFunction`	`string`	first entry of `functions`	Uncontrolled initial active function.
`onActiveFunctionChange`	`(name: string) => void`	—	Fires on every function change.
`x`	`number`	—	Controlled x position.
`defaultX`	`number`	midpoint of `range`	Uncontrolled initial x.
`onXChange`	`(x: number) => void`	—	Fires on every drag / keyboard nudge.
`range`	`readonly [number, number]`	`[-4, 4]`	Visible x-axis domain.
`showSecant`	`boolean`	`false`	Overlay the dashed secant line.
`secantEpsilon`	`number`	`0.5`	Horizontal offset for the secant's second sample.
`transition`	`Transition`	`SPRINGS.snap`	Spring for tangent / marker 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 function.
The drag surface is role="slider" with aria-valuemin / aria-valuemax / aria-valuenow reflecting x.
An aria-live="polite" summary above the chart reads out f(x) and f'(x) whenever the marker or function changes.
Keyboard: ← / → nudge 1% of the range, Shift+← / Shift+→ nudge 5%, Home jumps to range[0], End to range[1].
The function picker is a role="radiogroup" of role="radio" buttons, each tagged data-state="on" | "off".
Animation respects prefers-reduced-motion: reduce — all springs collapse to an instant swap.

Credits

Extracted from: craftingattention (app/src/lessons/primitives/math/DerivativeExplorer.tsx). Stripped the lesson-specific Explore / Predict / Challenge mode strip, narration heuristics, bookmark presets, and undo / redo history; generalized to a single primitive with controlled / uncontrolled state pairs and an extensible functions list.