Float Bit Viewer

A bit-row visualization of the IEEE 754 representation of a floating-point number. The row is split into three color-coded groups — the sign bit (warning), the exponent bits (accent), and the mantissa bits (success) — so the binary anatomy of a float is legible at a glance. Useful for teaching floating-point precision, why 0.1 + 0.2 !== 0.3, and what happens at the edges of representable range.

Installation

npx shadcn@latest add https://craftbits.dev/r/float-bit-viewer.json

Usage

import { FloatBitViewer } from "@craft-bits/core";
 
<FloatBitViewer value={0.1} precision="float32" />

Compare single vs. double precision:

<div className="space-y-6">
  <FloatBitViewer value={0.1} precision="float32" />
  <FloatBitViewer value={0.1} precision="float64" />
</div>

Understanding the component

1. Why a round-trip through DataView. Computing IEEE 754 bits by hand (sign / biased exponent / normalized mantissa) is error-prone — subnormals, infinities, and NaN each have their own quirks. Instead we round-trip the value through ArrayBuffer + DataView.setFloat32 / setFloat64, then read the raw Uint32 (or BigUint64 for double precision) back out. JS gives us the exact stored bit pattern for free.
2. Three groups, three colors. The sign bit uses --cb-warning, the exponent bits use --cb-accent, and the mantissa bits use --cb-success. Each "1" cell picks up a 1px ring plus an 18% tinted fill in its group color so the row reads as a binary number at a glance.
3. Why getBigUint64 for float64. JS numbers are themselves float64, so reading 64 bits into a plain number would lose the low bits. getBigUint64 returns a BigInt, the only safe way to extract all 64 bits losslessly.
4. Decoded readout shows quantization. When showDecoded is on, the footer shows what the number actually becomes after being stored at the chosen precision. For values like 0.1 in float32, the input was 0.1 but the decoded value is roughly 0.10000000149, which is what the bit pattern above genuinely represents.
5. Smooth bit transitions. Tone changes use SPRINGS.smooth so cells animate between 0 and 1 as the value changes. The colour transition collapses to duration: 0 under prefers-reduced-motion: reduce.

Props

Accessibility

• The outer element is role="img" with an aria-label describing the precision, the decoded value, and the full binary string.
• Each cell carries role="img", data-bit (0/1), and data-group (sign/exponent/mantissa) so consumer apps can hook custom styling or assistive tooling per-bit.
• Group labels are decorative — they're marked aria-hidden="true" since the outer aria-label already announces the structure.
• Colour is never the only signal: every cell renders its digit, and "1" cells layer a ring plus a fill on top of the group colour so highlighted bits stay legible for colourblind users.
• The cell colour transition respects prefers-reduced-motion: reduce and collapses to an instant swap when the user opts out.

Credits

• Extracted from: craftingattention (app/src/lessons/primitives/viz/FloatBitViewer.tsx). The original module bundled three concerns — the bit-row decomposition, a fp16-vs-fp32 number-line comparison, and a zoomable fp16 explorer — into one component, with manual mantissa-extraction math that approximated rather than exactly reproduced the stored bit pattern. The library version is just the bit-row decomposition, but reads the exact stored bits via DataView so every IEEE 754 edge case renders correctly, swaps fp16 for the JS-native float32 / float64 precisions, and folds the inline colour palette into the cb-warning / cb-accent / cb-success semantic tokens.