# @sphynxoid/stepwise

> React 18/19 hooks and optional components for interactive explainers: step-through players for algorithm traces, traces computed live from an input (edit it mid-playback, the playhead keeps its place), pause-and-predict checkpoints with graded answers, guided tours, scroll-driven chapters and glossary tooltips. One primitive underneath: a clamped cursor over an ordered list. ESM only; styles via a precompiled styles.css, Tailwind, or a shadcn registry.

## Docs

- [Full guide for AI assistants](https://stepwise.thesphynx.net/llms-full.txt): setup, patterns with code, pitfalls, and the complete API reference in one file
- [API reference](https://stepwise.thesphynx.net/docs): every hook, component and option
- [Recipes](https://github.com/TheSphynxoid/stepwise/blob/master/docs/RECIPES.md): Next.js + MDX article, shareable links, grading a checkpoint, testing

## Examples

- [Live simulation](https://stepwise.thesphynx.net/simulate): useSimulation, syncInput links, predict mode
- [Live edge](https://stepwise.thesphynx.net/live): a growing timeline with follow and Go live
- [Automaton](https://stepwise.thesphynx.net/automaton): experimental branching walks (useWalk, fromGraph): a DFA run and drawn from one declaration, and a walk that branches on the reader's answers
- [Composed lesson](https://stepwise.thesphynx.net/lesson): scroll chapters + embedded player + tour + glossary
- [Next.js + MDX article](https://github.com/TheSphynxoid/stepwise/tree/master/examples/next-mdx): a complete interactive article
- [Vite starter](https://github.com/TheSphynxoid/stepwise/tree/master/examples/vite-starter): the smallest app, no Tailwind