craftbits*

craft-bits

craft-bits is a collection of React components extracted from three production projects (craftingattention, terminal-dreams, AlgoFlashcards). It pairs a minimal, restrained aesthetic with a live-customization model — every demo on this site is editable in place.

What's inside

  • Universal primitives — buttons, text effects, code blocks, motion tokens.
  • Visualizations — DSA / ML / math diagrams and animated explainers.
  • Lesson widgets — prediction gates, phased explainers, recipe steps.
  • Labs — full-app showcases like virtual-scroll demos and architecture scenarios.

Every component ships in four variants (JS-CSS, JS-TW, TS-CSS, TS-TW), installable individually via the craft-bits CLI.

Live customize panel — preview

The MDX renderer wires up a <ComponentDemo> primitive that hosts live sliders and toggles. Once components are extracted, every page will use it like:

<ComponentDemo>
  <Slider name="speed" min={0} max={2} default={0.5} />
  <Toggle name="reverse" default={false} />
  <Preview>
    {({ speed, reverse }) => <ScrambleHover speed={speed} reverse={reverse}>hover me</ScrambleHover>}
  </Preview>
</ComponentDemo>

Status

🚧 Pre-alpha. Inventory complete, monorepo scaffold ready, first component extraction starting.