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-ключа и живого ИИ-бэкенда.
Какие темы vistep освещает сейчас?Сцены сгруппированы в три раздела: Mechanisms (например, велосипедные передачи, холодильник, лазерная печать), Information (сжатие JPEG, обучение и генерация, загрузка веб-страниц) и Systems (размерности, маятники, расписание лифтов).
Насколько велика коллекция сейчас?Сейчас в релизе 64 сцены, публикуемые из ветки main через GitHub Actions.
Какие языки поддерживаются?Каждая сцена создана с озвучкой, субтитрами и транскриптами и на английском, и на китайском, а поиск по сайту работает на обоих языках.
Какой стек технологий отрисовывает визуализации?Astro пререндерит текст статей, а модели на React и TypeScript отрисовывают интерактивные части с помощью SVG, Canvas или Three.js, синхронизируясь с записанной озвучкой через общие часы глав.
Creator
int64ago
Size
20.1 MB
Stars
240
Updated
CommitOct 18
Age
1mo
Commits · 90 Days