科技动态图形编码器

科技动态图形编码器 是做什么的？

生成可直接用于生产环境的程序化动态图形和交互动画代码，采用极简的深色模式工业科技美学。

摘要

将文本脚本、技术架构或数据点转换为独立的HTML/JS/CSS或React/Remotion动画代码，具有深色碳网格背景、高对比度霓虹色强调、HUD角括号和弹簧物理过渡。

使用时机

• 用户想要生成基于代码的动画（HTML、React、Framer Motion、GSAP、Motion Canvas或Node.js Remotion）用于视频制作或技术演示。
• 用户提到了技术讲解风格（例如：硅谷101、Apple Keynote深色模式、HUD硬件拆解）。
• 用户需要芯片/硬件架构、流程时间线、数据对比或多步骤工作流的动态可视化。

视觉与美学规范

所有生成的代码需应用以下精确的设计标记：

1. 背景与表面：

   • 基础画布：#0D0E11 到 #141518，并带有细微的CSS点阵或碳纤维网格（radial-gradient(#2A2D35 1px, transparent 1px) 配合 background-size: 16px 16px）。
   • 卡片表面：rgba(255, 255, 255, 0.03) 配合 backdrop-filter: blur(8px) 和 1px solid rgba(255, 255, 255, 0.12)。

2. 调色板：

   • 主要强调色（活动/高亮）：#FF5500（工业橙），发光效果为 0 0 16px rgba(255, 85, 0, 0.35)。
   • 次要强调色（数据/计算）：#38BDF8（青色）。
   • 文字层级：主要 #F3F4F6，次要 #9CA3AF，柔和/非活跃 #4B5563。

3. 排版与HUD元素：

   • 标题与正文：Inter、HarmonyOS Sans SC 或 PingFang SC，关键要点使用粗体。
   • 数字、年份和规格：JetBrains Mono 或 Share Tech Mono（font-variant-numeric: tabular-nums）。
   • 装饰性HUD：在主要容器上添加 6px x 6px 的L形角括号（border-top + border-left 等），并在章节标题旁放置橙色垂直药丸指示器（width: 4px; background: #FF5500）。

核心动画原型

根据用户内容选择合适的原型：

1. 滑动时间线 ([Timeline])：

   • 水平虚线轨道（border-bottom: 2px dashed #374151）。
   • 活跃节点缩放至 1.1x，带 #FF5500 边框和发光节点圆点；历史节点左移，缩放至 0.85x，并变暗至 opacity: 0.4。
   • 标注规格垂直交错出现（translateY(12px) 到 0，stagger: 120ms）。

2. 硬件/系统架构 ([Architecture])：

   • 分屏或嵌套式栅格布局，左侧显示宏观模块，右侧显示微观内部管线。
   • 数据包由发光的 #FF5500 药丸或SVG stroke-dasharray 脉冲表示，在子模块之间移动（例如：任务 -> 核心 -> 共享缓存）。
   • 包含实时更新的计数器或状态徽章，以对比旧版与下一代性能。

3. 动态数据与指标卡片 ([DataChart])：

   • SVG折线图或条形图，带 stroke-dashoffset 绘制动画。
   • 预测部分以虚线 #FF5500 线条呈现。
   • 3列式栅格摘要卡片，带编号标题（01， 02， 03）和动画水平进度条，比较基线（#4B5563）与目标（#FF5500）。

执行步骤

1. 分析内容并选择原型：

   • 将用户输入分解为独立场景或关键帧（步骤1，步骤2，步骤3...）。
   • 将每个场景映射到 [Timeline]、[Architecture] 或 [DataChart]。

2. 选择技术栈：

   • 默认（零配置预览）：输出一个独立的 index.html，使用Tailwind CSS (CDN)、GSAP或Anime.js (CDN) 以及原生JS状态控制器。
   • 视频渲染（当要求使用Node.js/Remotion时）：输出一个模块化的React组件，使用 remotion（useCurrentFrame， spring， interpolate）或 framer-motion。

3. 实现播放与控制：

   • 始终包含右下角或键盘驱动的控制器（空格键播放/暂停，ArrowRight/ArrowLeft 逐步移动关键帧，R 键重播）。
   • 提供一个可切换的“纯净画布模式”（按H键隐藏UI控件），以便用户可以在1920x1080（16:9）无干扰的情况下录制屏幕。

4. 强制运动物理：

   • 用户界面移动绝不要使用线性过渡。使用 cubic-bezier(0.22, 1, 0.36, 1) 或弹簧物理（stiffness: 120, damping: 18）。
   • 通过清晰的步骤标签同步视觉状态变化，使动画匹配画外音节奏。

注意事项

• 避免杂乱：屏幕上最多同时保持3个数据维度。当关注特定子组件时，使非活跃模块变暗（opacity: 0.35）。
• 宽高比：将主舞台容器锁定为 16:9（aspect-ratio: 16/9，max-width: 1920px），并在视口中居中，以确保视频捕获期间布局不会变形。
• 无外部图片依赖：使用纯CSS形状、内联SVG和排版，而不是可能加载失败的外部图片URL。