Memory Scale Viz

A horizontal-bar comparison primitive for the way memory consumption scales across operating points — sequence length, batch size, or model size sweeps. Each point renders as one bar at a shared scale; a dashed capacity line overlays the chart so the reader sees, by length, where the configuration overflows the GPU. Bars past the line tint into cb-error and the footer chip flips to exceeds capacity.

Installation

npx shadcn@latest add https://craftbits.dev/r/memory-scale-viz.json

Usage

import { MemoryScaleViz } from "@craft-bits/core";
 
<MemoryScaleViz
  points={[
    { id: "small",  label: "small / 1B", memoryGb: 4 },
    { id: "med",    label: "med / 3B",   memoryGb: 16 },
    { id: "large",  label: "large / 7B", memoryGb: 56 },
    { id: "xl",     label: "xl / 13B",   memoryGb: 104 },
    { id: "xxl",    label: "xxl / 30B",  memoryGb: 240 },
  ]}
  capacityGb={80}
  currentPoint="large"
/>

Drive the highlighted point from a surrounding stepper or slider:

<MemoryScaleViz
  points={points}
  capacityGb={80}
  currentPoint={selected}
/>

Drop the capacity line for a pure-comparison readout:

<MemoryScaleViz points={points} capacityGb={undefined} />

Understanding the component

1. One shared denominator. Bar widths divide by max(largest memoryGb, capacityGb) so the dashed capacity tick stays anchored at the right edge until a point actually overshoots it. Proportions across points stay honest — a small point never balloons just because no other bar is wider.
2. Capacity overlay. When capacityGb is provided, a dashed vertical line is drawn over the bar column at the capacity position. The line tints to cb-error once any point overshoots it; otherwise it stays in cb-border-strong.
3. Over-capacity tint. Bars whose memoryGb exceeds capacityGb paint in cb-error (not the default cb-info), the numeric readout flips to cb-error, and the row carries data-over="true" for downstream styling.
4. Current-point highlight. Setting currentPoint to a point's id strengthens its fill (to cb-accent), surrounds the bar track with a 1px accent outline, and marks the row with data-state="current".
5. Verdict chip. Below the chart, an exceeds capacity / within capacity chip states the pass/fail state textually — colour is never the only signal.
6. SPRINGS.smooth everywhere. Bar-width changes animate with the canonical smooth spring; prefers-reduced-motion: reduce collapses every spring to an instant swap.

Props

Accessibility

• The figure is role="figure" with a hidden summary listing every point's label, GiB, and over-capacity state plus the capacity line — screen readers hear the whole comparison whenever props change.
• Colour is never the only signal — each row pairs a textual label with a tabular-nums GiB readout, every over-capacity row carries data-over="true", and the footer chip states exceeds capacity / within capacity as words.
• The current point is announced through both the visible label tone and the data-state="current" attribute, not by colour alone.
• Motion respects prefers-reduced-motion: reduce.

Credits

• Extracted from: craftingattention (app/src/lessons/primitives/nn/MemoryScaleViz.tsx). The source paired a single-bar log-scale plot of attention-matrix bytes with a discrete-step sequence-length slider, a four-phase narration state machine (observe / growing / overflow / insight), a hard-coded comparison row for flash attention's O(N) memory, RTX 4090 and A100 capacity tick markers, a mini N×N-square animation on the left, an SVG breathing-pulse hint, a screen-reader live region, and a ChallengeBtn-driven comparison toggle. The library extract is the pure plotting primitive — N operating points in, normalised bars out — driven entirely by props with motion-library springs, a single configurable capacity line, and a currentPoint highlight hook for surrounding steppers.