怎么让 AI 做出落地页上那种动画

它是什么

假录屏。术语：fake screen recording / product demo animation / animated product mock，大类叫 Motion Design 或 Motion UI。你在 Linear、Vercel、Resend 首页看到的那种"命令行在跑、界面在切换、图表在长"的小窗口，不是录屏，是代码演的。

一句话说背后的技术：一条 JS 时间轴 + CSS/WAAPI 做微动画 + DOM/SVG 摆放元素，需要像素级质感再叠一层 WebGL 后处理（点阵、扫描线、擦除）。

它是销售物料，替代一次 demo call——访客不会为了看懂产品去预约演示。所以它只在 SaaS 和开发者工具站密集出现；业余项目少见不是因为难做，是因为没有一段值得被演一遍的流程。

成熟吗

成熟，零风险。底层全是浏览器十几年前就有的能力：CSS 动画、SVG、element.animate、Canvas、GSAP。90% 的成本在分镜，10% 在代码。

AI 能做吗

分两块看，差别很大。

机制它很强：时间轴循环、缩放适配、暂停开关、后处理管线，基本一次写对，还会自己挑合适的库。

导演它很弱：它不知道你的产品在干什么，默认审美就是跳动的数字加假仪表盘——所有 AI 味的唯一来源。

"看不到效果所以会搞砸"这个担心不成立：给它浏览器权限，它能截图、逐帧对比、隐藏图层做归因。可验证的事情它不瞎编，这是它在这类任务上比在别处靠谱的原因。

怎么让 AI 知道你想要啥

核心一句：别描述风格，描述画面和时间。

• 具体到秒。"科技感"无法执行；"0-3 秒出现终端和一行命令，3-6 秒出现三行日志，6-10 秒右边弹出浏览器窗口，一张表单在被填写"可以。
• 用类比换掉形容词。"像一个人打开终端敲命令" 比任何风格词都准确。
• 一次给三样：参考（具体到哪个站的哪一段）、分镜（上面那张时间表）、边界（总长几秒、循环不循环、手机上保不保留）。缺一样它就开始自由发挥。
• 让它先复述一遍需求再动手。复述错了，你省下三轮返工。
• 别说"再来一版更有创意的"。创意该你出，它只在执行上比你快。
• 改的时候指着截图说：这里慢一点、这个元素提前半秒、这段删掉。一次只改一个——让它"整体重做"，它会推倒重来，你调好的全丢。

用什么做

用途	工具
时间轴主控	GSAP Timeline（最成熟）、Motion / 原 Framer Motion（React 友好，底层优先 WAAPI）
可视化时间轴编辑器（浏览器里的 AE）	Theatre.js
交互式状态机动效	Rive
想直接导出成视频	Remotion（用 React 写视频，渲染 mp4）
复古屏幕质感	postprocessing、pixi-filters，或自己写一个 dither pass

不要用 Lottie：它擅长 AE 导出的矢量插画，塞真实 UI、长文本、等宽字体排版会非常痛苦。

必须守的几条

滚出视口就暂停。尊重 prefers-reduced-motion。只动 transform 和 opacity，逐帧改文本会持续触发 layout。DPR 封顶 2。一屏内别堆多个 WebGL context，iOS 会静默丢弃超出的。移动端要认输：降级成播一次，或直接换视频——3MB 的视频换来零主线程成本，比硬撑划算。

原创从哪来

抄机制，不抄内容。机制就那么几件事，AI 都会；内容必须是你自己的产品流程。同一个机制，演一次线上部署、演一次月度结算、演一次客服工单流转，就是三个完全不同的动画。

去哪看

• 分镜素材（真实产品流程录屏）：PageFlows、Mobbin
• SaaS hero 动效：SaaSFrame、Refero、SaaS Interface
• 元素级动效合集：Awwwards → Elements 板块
• 实现手法（带代码）：Codrops、GSAP Showcase、motion.dev/examples、CodePen 搜 fake terminal / dither / marquee
• 审美方向：Godly、Land-book

学透只需拆这十个站：Linear、Vercel、Resend、Modal、Railway、Raycast、Clerk、Browserbase、Sentry、Supabase。

---

你不需要先学动画技术再用 AI，你需要先学会把"这 20 秒里用户看到什么"写成一张表。AI 缺的一直是这张表。