vistep

vistep.ai 是一个专注于通过短篇视觉故事来讲解生活器物、科学原理与计算过程的教育平台。它打破了传统图文或视频教学的单向传递模式，强调“先看懂原理，再亲手验证”，让用户在交互式实验中建立深层理解。

核心理念：看见中间过程

vistep 的核心在于可视化不可见之物。无论是机械部件的联动、信号在电路中的流动，还是算法的每一步运算，vistep 都致力于展示其中间过程。

• 跟随式学习：用户可以跟随一个部件、一束信号或一次运算，直观地看到事物是如何运作的。
• 交互式验证：看完演示后，用户可以改变输入参数，实时观察结果变化，从而验证自己的理解是否正确。
• 计算驱动画面：所有的动画并非预渲染的视频，而是由独立的数学模型驱动几何、运动与读数。这意味着画面是“算”出来的，而非“画”出来的，保证了逻辑的严谨性。

功能亮点

1. 智能播放控制：
   • 支持按章节自动演示，也可随时暂停、重播、定位到特定步骤。
   • 提供按需展开的实验模块，让用户在感兴趣的地方深入探索。
2. 精准内容检索：
   • 支持中英文关键词搜索。
   • 结合兴趣分类、时长以及建议起看年龄进行筛选，帮助不同背景的用户找到合适的内容。
3. 原生中英双语：
   • 讲解文案、字幕及文字稿均为分别撰写，确保语言的地道与准确，而非简单的机器翻译。
4. 隐私与本地化：
   • 所有实验均在浏览器内运行，无需账号、无需 API 密钥、不依赖实时 AI 服务。
   • 配音录音存放在 Git LFS 中，克隆后即可离线使用，保护用户隐私。

技术架构与本地开发

vistep 采用现代化的前端技术栈，兼顾性能与交互体验：

• 框架：Astro 用于预生成静态文章，确保加载速度；React 用于构建复杂的交互式实验。
• 渲染引擎：实验部分通过 TypeScript 模型驱动，支持 SVG、Canvas 或 Three.js，实现高精度的可视化。
• 同步机制：动画与配音录音共用“章节时钟”，确保视听高度同步。
• 环境要求：
  • Node.js 24
  • pnpm 11.25.0
  • 浏览器基线：Chrome/Edge 108+, Firefox 121+, Safari 15.4+

快速开始

# 1. 安装 Git LFS (用于获取配音文件)
git lfs install

# 2. 克隆仓库
git clone https://github.com/int64ago/vistep.git
cd vistep

# 3. 启用 Corepack 并安装依赖
corepack enable
pnpm install --frozen-lockfile

# 4. 启动开发服务器
pnpm dev

访问 localhost:4321 即可开始体验。

常用命令