Cineview 设计技能
三张截图各在讲什么？最希望访客记住哪一个功能？
一个场景，一条时间线
像拍电影一样，把页面分成几场。每一场都有自己的时间线，文字和图片谁接着谁出场、停留多久，都排在这条线上。
- 标题 600 ms，从 0 ms 开始
- 说明 500 ms，接在标题后面，从 600 ms 开始
- 主按钮 500 ms，接在说明后面，从 1100 ms 开始
- 次按钮 500 ms，接在主按钮后面，从 1600 ms 开始
- 图片 900 ms，接在标题后面，从 600 ms 开始
- 连线 500 ms，接在图片后面，从 1500 ms 开始
先和 AI 讨论怎么做
把需求和 Cineview 的设计技能交给 AI。它先问清内容，再给出分场、时间和排版，你确认后才写代码。
你的需求
我想做一个介绍软件的页面，手上有三张截图和两段文字。
访客要先明白它是做什么的，再看具体功能。
请推荐合适的呈现方式，给出开头、变化和完成时的样子。
先用 Cineview 设计技能讨论，确认后再写代码。设计讨论示例
Cineview 设计技能
可以把图片固定在右侧，左侧放三段说明。读到下一段时，右边也换成对应的图。
Cineview 设计技能
先看开头、换图和结束时的样子。这几处确认后，再开始写代码。
从一个想法，变成一页设计
先写清页面要讲什么，再分成几场，最后把时间写进去。每一步的结论都留在上面，下一步接着往下做。
- 1想法
- 2分场
- 3页面
1需求要点内容
先写清页面要讲什么，挑好图片。
- 读者是谁，要记住什么
- 手上有哪些文字和图片
- 最先要看到的一句话
示例
「一款帮团队把想法做成落地页的框架。」
产出：一页需求说明
2场景计划分场
决定哪些内容同屏，分成几场。
- 每一场只讲一件事
- 谁先出场，停留多久
- 哪一场锁定，哪一场自然滚过
示例
| 开场 | 0–600 ms |
| 功能 | 600–1800 ms |
| 收尾 | 1800–2400 ms |
产出：分场表和时间安排
3页面实现实现
把时间写进每一场，在浏览器里验收。
- 写下 duration 和 after
- 停手、往回、快速跳都试一遍
- 窄屏和减弱动态效果也要看
示例
<cv-scene zone>
<cv-animate fx="rise" after="title">产出：能在浏览器里跑的页面
不同的页面，不同的做法
产品介绍、作品集、活动页、文档首页、品牌故事，各有各的节奏。先定讲法，再挑动画。
产品介绍
先讲用途，再一屏一个功能。
「十分钟，做出第一页。」
适合新品发布、功能更新
作品集
每件作品一场，图先到，说明随后。
「每一件作品，都值得一整屏。」
适合设计师、工作室
活动页
倒计时、议程和报名，按时间往下排。
「还有 3 天，我们在上海见。」
适合发布会、线下活动
文档首页
从入门到进阶，一段一段带读者往下走。
「一行命令，装好就能用。」
适合开源项目、开发者工具
品牌故事
用几场画面讲完来历，最后停在一句话上。
「从一间小工作室开始。」
适合品牌官网、周年专题
画面也可以叠加处理
给你的画面一些想象的空间。
- 1对焦
focus - 2双色
duotone - 3放映
cv-video
更灵活的扩展，给你丰富的想象力
框架没有提供的效果，你可以自己画。Canvas、SVG 或 WebGL 订阅元素的 timeline，就能和页面用同一个进度。右边这台放映机就是这样画出来的：往下滚，碎片一片片飞回原位，拼成放映机，胶片盘转起来，光束渐渐亮起；按住还能拖动，转着看。
const time = document.querySelector('#projector-time');
time.timeline.subscribe((frame) => {
assemble(frame.progress); // 0 到 1，与页面同一个进度
});按住画面上下拖动