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)

Searching Database…

240 ·GitHub
这是什么?vistep.ai 是一个中英双语的短篇可视化故事合集,讲解日常机制、科学和计算原理,让你先看过程如何发生,再用底层模型做实验。
它是一组视频,还是交互式模拟?每个主题都是一部可重放、可拖动进度的分章“影片”,并配有独立的交互模型,随着你改变输入,驱动屏幕上的几何、运动和读数。
本地怎么运行它?在装有 Node.js 24 和 pnpm 11.25.0 的环境下克隆仓库,运行项目的 install/dev 脚本,然后在浏览器打开 localhost:4321。
克隆仓库之前需要准备什么?你需要 Node.js、pnpm 和 Git LFS,因为旁白音频通过 Git LFS 存储,必须先取下来网站才能在本地正常工作。
所有实验在任何浏览器里都能加载吗?不能——网站以现代浏览器为基线(Chrome 108、Edge 108、Firefox 121、Safari 15.4),如果缺少所需能力,会显示提示而不加载实验。
使用这些实验需要 API 密钥或账号吗?不需要。交互实验和旁白完全在你的浏览器里运行,无需账号、API 密钥或在线 AI 后端。
vistep 目前涵盖哪些主题?场景分为三大领域:机制(如自行车变速、制冷、激光打印)、信息(JPEG 压缩、训练与生成、网页加载)和系统(量纲、单摆、电梯调度)。
目前这个合集有多大规模?当前发布包含 64 个场景,通过 GitHub Actions 从 main 分支发布。
支持哪些语言?每个场景都以英语和中文配有旁白、字幕和文字稿,网站也支持用任一语言搜索。
可视化是用什么技术栈渲染的?Astro 预渲染文章文本,基于 React 的 TypeScript 模型用 SVG、Canvas 或 Three.js 渲染交互部分,并通过共享的章节时钟与录制的旁白同步。
Creator
int64ago
Size
20.1 MB
Stars
240
Updated
CommitOct 18
Age
1mo
Commits · 90 Days