vistep.ai

Visualize Every Step with AI

Watch how things work. Then experiment with the model.

Explore · Documentation · Contribute · 简体中文

Still image

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 62 scenes. Production publishes from main through GitHub Actions. The release and review record distinguishes delivery from the remaining coverage of complete viewing, native listening and physical-phone testing.

Start exploring

Mechanisms	Information	Systems
Bicycle gearing	JPEG compression	Dimensions
Refrigeration	Training & generation	Pendulums
Laser printing	Web loading	Elevator scheduling

Complete source catalog

Run locally

Use Node.js 24 and pnpm 11.25.0.

git clone https://github.com/int64ago/vistep.git
cd vistep
corepack enable
pnpm install --frozen-lockfile
pnpm dev

Open 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.

Contribute

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.