Residual Bypass

The emotional payoff of the chain-rule lesson. A pulse travels backward through an N-layer pipeline; each layer multiplies the gradient by derivative, so the eye watches the signal physically shrink. Once the gradient has died, a switch appears — toggle skip connections on and curved arcs draw above the boxes, the gradient replays, and the comparison bars at the bottom reveal that the layer path still fades while the skip path arrives at 1.0.

The whole story in one screen: y = f(x) + x → dy/dx = f'(x) + 1. The +1 is the gift.

5 layers, each multiplying the gradient by 0.5. Send the gradient backward and watch what happens to the signal.

Customize

Pipeline

layers5

derivative0.50

initial ∇1.0

Installation

npx shadcn@latest add https://craftbits.dev/r/residual-bypass.json

Usage

import { ResidualBypass } from "@craft-bits/viz/residual-bypass";
 
<ResidualBypass />;

A shallower pipeline with a less-aggressive derivative:

<ResidualBypass layers={3} derivative={0.7} />

Subscribe to phase transitions to drive a sibling chart or transcript:

<ResidualBypass
  onPhaseChange={(phase) => {
    /* "ready" → "dying" → "died" → "skip-on" → "revealed" */
  }}
  onSkipToggle={(skipOn) => {
    /* mirror the switch into your own state */
  }}
/>

Understanding the component

Pipeline layout. Each layer is rendered as a rounded box with its label and ×derivative annotation. The loss sits to the right as a small badge holding the initial gradient ∇.
Phase machine. ready is idle. Click once and the pulse travels backward through every layer (dying → died), with a per-layer running-gradient label fading in below each box. The skip toggle appears in died. Turning it on enters skip-on: arcs draw, the pulse replays, the comparison bars animate. One more click reaches revealed; the next click resets.
Pulse geometry. Radius is max(2, 12 × g/g₀) and opacity is 0.15 + 0.80 × g/g₀, where g/g₀ is the running gradient divided by the initial gradient. Colour switches from var(--cb-accent) to var(--cb-error) once the ratio drops below 0.3.
Skip arcs. Each consecutive pair of boxes gets a dashed quadratic-Bezier arc drawn in var(--cb-success) with a ∂ = 1 label at the peak. A small pulse travels each arc to show the skip path carrying the signal.
Comparison bars. Two bars at the bottom encode the surviving gradient on each path. The skip-path bar fills to its full width because the skip-path gradient is always 1.
Reduced motion. Under prefers-reduced-motion: reduce, all imperative tweens collapse to instant attribute sets and the idle breathing pulse on the loss is suppressed.

Props

Prop	Type	Default	Description
`layers`	`number`	`5`	Number of layers in the pipeline. Clamped to a minimum of `2`.
`derivative`	`number`	`0.5`	Local derivative applied at every layer.
`initialGradient`	`number`	`1`	Gradient value at the loss (right-hand side).
`transition`	`Transition`	`SPRINGS.smooth`	Override the pulse-move spring.
`onPhaseChange`	`(phase) => void`	—	Fires whenever the phase advances.
`onSkipToggle`	`(skipOn) => void`	—	Fires whenever the skip-connection switch flips.
`className`	`string`	—	Merged onto the root via `cn()`.

Accessibility

The SVG is role="img" with an aria-label summarising the current phase and layer count.
A polite live region announces each phase in plain prose so screen-reader users get the same outcome as sighted users.
The skip-connection toggle is a proper role="switch" with aria-checked. The action button has a context-aware label.
Colour is never the only signal — the running gradient is also encoded numerically in the per-layer labels and the narration.
Motion respects prefers-reduced-motion: reduce.

Credits

Extracted from: craftingattention (app/src/lessons/primitives/math/ResidualBypass.tsx). The source was a lesson-chrome-bound component — it consumed SvgLabel and ChallengeBtn, hardcoded a 5-layer pipeline with derivative 0.5 and an initial gradient of 1, embedded a five-branch narration generator with per-phase button labels, and depended on per-track lesson palette tokens. The viz extract parameterises layers, derivative, and initialGradient, remaps the colour palette to var(--cb-*) semantic tokens, re-keys every spring to SPRINGS.smooth / SPRINGS.snap / SPRINGS.bouncy / SPRINGS.damped, replaces the lesson ChallengeBtn with a token-styled inline <button>, and surfaces onPhaseChange / onSkipToggle so consumers can drive sibling state from the component's phase machine.