Visualize Every Step with AI
Watch how things work. Then experiment with the model.
Explore · Documentation · Contribute · 简体中文
vistep.ai explains everyday mechanisms, science and computation through short visual stories. Follow a moving part, a signal or a calculation, then change the inputs to see what happens.
- Watch, pause, explore. Chaptered films with replay, seeking and optional experiments.
- Models drive the picture. Independent calculations connect geometry, motion and readouts; articles explain assumptions and cite sources.
- Find your next question. Search in either language; narrow by interest, running time and suggested starting age.
- English and Chinese. Authored narration, captions and transcripts. Experiments run in your browser without an account, API key or live AI service.
Release: the collection now contains 74 scenes. Production publishes from main through GitHub Actions. The collection expansion record and scene review records distinguish delivery from the remaining coverage of complete viewing, native listening and physical-phone testing.
| Mechanisms | Information | Systems |
|---|---|---|
| Bicycle gearing | JPEG compression | Dimensions |
| Refrigeration | Training & generation | Pendulums |
| Laser printing | Web loading | Elevator scheduling |
Use Node.js 24 and pnpm 11.25.0. The configured browser baseline is Chrome 108, Edge 108, Firefox 121 and Safari 15.4; a feature check shows a notice instead of loading experiments when required capabilities are unavailable. Narration recordings are stored in Git LFS, so install it before cloning.
git lfs install
git clone https://github.com/int64ago/vistep.git
cd vistep
corepack enable
pnpm install --frozen-lockfile
pnpm devOpen localhost:4321. Recorded audio is included; local development needs no Cloudflare credentials or speech service.
| Command | Purpose |
|---|---|
pnpm verify |
Formatting, documentation links, types, tests, production build and artifact audit |
pnpm build:preview |
Separate preview build with noindex checks |
pnpm preview |
Serve the production build locally |
pnpm scene:check |
Scene, bilingual content and audio contracts |
Astro prerenders the articles; React experiments use TypeScript models with SVG, Canvas or Three.js. Animation and recorded narration share a chapter clock. See architecture, localization and deployment.
Scientific corrections, new scenes, translations and accessibility improvements are welcome. Follow the production guide, or give the vistep-scene skill a brief such as “Explain why an induction motor turns.” Review records separate automated checks, browser observations and listening evidence.
Contribution guide · Code of Conduct · Report a vulnerability privately
Original code and documentation are MIT licensed. See third-party notices for fonts, dependencies and audio provenance.