math-interactive-visualizer

name	math-interactive-visualizer
description	用户给出任何数学公式（LaTeX 或文字描述），AI 生成一个专业、美观、响应式的单文件交互网页。页面使用现代设计（深色/浅色模式、流畅动画、Tailwind + Glassmorphism）、MathJax 渲染公式、Plotly.js/Chart.js 实时绘图、参数滑块、动画演示、自测小测验，让学生通过拖拽、滑动、点击直观理解公式。
license	MIT
compatibility	opencode
metadata	{"category":"education","tags":"math visualization interactive learning"}

What I do

• 解析用户提供的公式（支持 LaTeX、方程、函数、几何、微积分、三角等）
• 自动判断最佳可视化方式（曲线图、单位圆、3D 曲面、向量动画、参数方程等）
• 生成一个完整的、单文件 math-viz/index.html，无需安装任何依赖（全部使用 CDN）
• 页面必须专业美观：采用 Tailwind CSS（via CDN）+ Glassmorphism + 流畅 CSS 动画 + 深色/浅色自动切换
• 核心交互功能：
  • 公式实时编辑（MathJax + 简单输入框）
  • 参数滑块（a、b、c、θ 等变量）
  • 实时绘图（Plotly.js 或 Chart.js）
  • 动画演示（函数轨迹、极限逼近、导数切线等）
  • 关键性质高亮（零点、对称性、极值）
  • 简短中文解释 + 英文术语对照
  • 3-5 道互动小测验（即时反馈）
• 输出后自动打开浏览器预览（使用 open 或提示用户）

When to use me

当用户说「把这个公式做成交互网页」「帮我可视化 sin(x) + cos(2x)」「生成二次函数教学页面」「微积分极限演示」等场景时立即激活。
如果用户未明确目标年级/重点，主动询问：「是高中还是大学？重点想展示哪个性质（图形、极限、导数、积分）？需要包含测验吗？」

How to execute

1. 在当前目录创建 math-viz/ 文件夹
2. 在里面生成 index.html（完整单文件，< 300KB）
3. 使用以下技术栈（全部 CDN）：
   • Tailwind CSS：https://cdn.tailwindcss.com
   • MathJax：https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
   • Plotly.js：https://cdn.plot.ly/plotly-2.35.2.min.js
   • Lucide icons（可选）
4. 代码必须干净、带注释、可直接部署到 GitHub Pages 或 Vercel
5. 页面结构：顶部导航 + 左侧公式面板 + 中间大可视化区 + 右侧解释/测验面板（移动端自动折叠）
6. 始终使用中文界面（标题、按钮、解释），英文公式符号保留

Best Practices

• 视觉：深色模式默认，玻璃拟态卡片，微光阴影，60fps 动画
• 交互：所有参数实时更新，无延迟；添加「重置」「分享链接」按钮
• 可访问性：键盘支持、屏幕阅读器友好、高对比度
• 性能：不超过 3 个外部 CDN，懒加载 Plotly
• 教育性：每张图都有「为什么这样动」的文字提示
• 避免：不要用 React/Vue（保持单文件简单），不要嵌入后端

Examples

示例1 用户输入：y = x² - 4x + 3
→ 生成二次函数网页：a/b/c 滑块、抛物线实时变化、顶点坐标、与 x 轴交点、拖动顶点动画、5 道测验

示例2 用户输入：lim_{x→0} (sin x)/x
→ 生成极限逼近动画：x 滑块、sinx/x 曲线 + 单位圆同步动画、表格数值逼近

示例3 用户输入：sin(2θ) 的图像
→ 生成单位圆 + 正弦波联动动画，θ 滑块，显示双角公式推导