vistep README

The project's README from github.com/int64ago/vistep. As one markdown file: README.md.

vistep.ai

Visualize Every Step with AI

Watch how things work. Then experiment with the model.

Explore · Documentation · Contribute · 简体中文

CI License: MIT Astro TypeScript Cloudflare Workers Languages

Animated scenes from vistep.ai

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.

Release: the collection now contains 64 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.

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

vistep (int64ago/vistep)

science
Searching Database…

240 ·GitHub
Vistep
What is this?vistep.ai is a bilingual collection of short visual stories that explain everyday mechanisms, science and computation, letting you watch a process happen and then experiment with the underlying model.
Is this a set of videos or interactive simulations?Each topic is a chaptered 'film' with replay and seeking, paired with independent interactive models that drive the on-screen geometry, motion and readouts as you change inputs.
How do I run this locally?Clone the repo with Node.js 24 and pnpm 11.25.0 installed, run the project's install/dev scripts, then open localhost:4321 in the browser.
What do I need before cloning the repo?You need Node.js, pnpm and Git LFS, since the narration audio recordings are stored via Git LFS and must be fetched before the site works locally.
Will every experiment load in any browser?No — the site targets a modern browser baseline (Chrome 108, Edge 108, Firefox 121, Safari 15.4), and if a required capability is missing it shows a notice instead of loading the experiment.
Do I need an API key or account to use the experiments?No, the interactive experiments and narration run entirely in your browser with no account, API key or live AI backend required.
What topics does vistep currently cover?Scenes are grouped into three areas: Mechanisms (e.g. bicycle gearing, refrigeration, laser printing), Information (JPEG compression, training and generation, web loading) and Systems (dimensions, pendulums, elevator scheduling).
How big is the collection right now?The release currently contains 64 scenes, published from the main branch through GitHub Actions.
What languages are supported?Every scene is authored with narration, captions and transcripts in both English and Chinese, and the site can be searched in either language.
What tech stack renders the visualizations?Astro prerenders the article text while React-based TypeScript models render the interactive parts with SVG, Canvas or Three.js, synced to recorded narration via a shared chapter clock.
What are similar projects?clay-safari, model-x-studio, aetherviz-master, Jelly-Baby, algorithm-visualizer, G6, RhineLabUI, human-atlas
Which topics is it in?science, astro, bilingual, cloudflare-workers, interactive, threejs, canvas, simulation, cloudflare, svg, visualization, github-actions
Creator
int64ago
Size
20.1 MB
Stars
240
Updated
CommitOct 18
Age
1mo
Commits · 90 Days