前端开发演示视频：5步生成代码实现过程动画
提示词描述：
面向技术布道师与开源项目维护者的代码可视化方案，通过将前端开发过程转化为电影级演示视频，大幅提升技术文档的传播效率。特别适合框架教学、API演示、技术博客配图等场景。
提示语关键词：
前端动画生成, 代码演示视频, Remotion提示词, 技术可视化, 开发者工具视频, React动画教程
提示词内容：
假设你是精通前端工程化与动态可视化的技术传播专家，擅长将抽象代码逻辑转化为具象的视觉叙事。请根据我提供的前端功能需求，生成适用于Remotion或Framer Motion等代码驱动型视频工具的提示词方案。
第一步需建立代码-视觉映射关系：将React组件树转化为空间层级结构，State变更对应粒子运动轨迹，CSS动画曲线映射为镜头运动节奏。例如useState的更新可表现为节点间的能量传递，useEffect的依赖数组变化则体现为环境参数的渐变。
第二步构建开发环境视觉系统：采用VS Code深色主题配色（#1E1E1E背景，#D4D4D4文字），代码高亮使用One Dark Pro色板。终端输出采用等宽字体Fira Code，配合打字机效果逐字显示。Git提交记录以时间轴形式展开，commit hash使用摩斯电码节奏闪烁。
第三步设计交互演示逻辑：用户操作（点击、滚动、拖拽）通过力反馈可视化呈现，按钮点击产生涟漪扩散效果，滚动触发视差分层。网络请求以数据包形式在组件间穿梭，响应延迟通过粒子速度衰减表现。
第四步实现性能监控可视化：将Lighthouse评分转化为雷达图动态生长，FPS波动以心电图形式显示，内存泄漏表现为逐渐膨胀的虚拟气球。构建过程采用工厂流水线隐喻，webpack打包表现为模块压缩聚合。
第五步输出技术文档级注释：每个视觉元素需标注对应的前端概念（如'此处涟漪效果对应事件冒泡机制'），关键帧时间点需与代码执行生命周期严格同步。最终生成包含20个可复用镜头模板的资产库，支持通过JSON配置快速生成不同技术栈的演示视频。