Happy Little Horse — 小马滚动叙事网页

这个项目是一次围绕 AI 角色视频和网页滚动交互的视觉实验。我先用一只白色小马作为统一角色形象，生成多段不同动作和景别的视频片段，再把它们拼接成一条完整的 Demo 视频，最终转译成一个由滚动控制画面进度的单页面互动网页。

页面不是直接播放视频，而是把视频抽成连续图片序列，通过 canvas 根据滚动进度逐帧绘制，让用户向下滚动时小马继续前进，向上滚动时画面自然倒退。这个方案更笨重，但帧控制更稳定，也更接近我想要的“滚动即剪辑”。

项目起点

最初的想法来自一个很简单的画面：一只柔软、白色、大眼睛的小马在浅色空间里醒来。它不是传统意义上的品牌主视觉，而更像一个可以住进网页里的小角色。

我希望这个页面不是普通的视频嵌入，也不是只把图片放在网页首屏，而是让用户的滚动行为真正参与叙事：小马眨眼、走近、跳动、遇见小花、玩球、追逐蝴蝶，最后进入草地和蓝天。整个网页像一段可以被手指控制的轻动画。

视觉与叙事方向

页面采用干净的浅灰白背景，保留小马柔软、梦幻、治愈的角色气质。文字层使用大号英文标题和短中文文案组合：英文负责视觉节奏，中文负责补充情绪和故事。

在排版上，我参考了动态网页 hero section 的处理方式，把主视觉铺满屏幕，文字和按钮固定在画面上方。这样小马始终是第一视觉主体，文案只在关键节点出现，不抢走角色动作本身的注意力。

AI 视频流程

我先整理了小马的角色设定提示词，统一它的毛发、眼睛、表情、身体比例和整体质感。这个阶段最费时间的是角色一致性：有些片段里小马会变得太像玩偶，有些片段腿部比例会变长，眼睛大小也会漂移。我最后宁愿舍掉几段动作更丰富的画面，也优先保留“看起来还是同一只小马”的片段。

随后我围绕不同节点生成画面和视频片段，包括近景眨眼、全身走动、轻跳、靠近花、玩球、蝴蝶互动、花旁休息和草地收束。

这些片段被拼接成一条约 48 秒的视频 Demo。为了让网页滚动时可以稳定控制画面，我没有直接使用 video 的 currentTime，而是将视频抽成序列帧，再交给前端 canvas 渲染。代价是资源数量变多，加载策略必须单独处理；好处是滚动到某一段时画面不会因为浏览器视频解码差异出现明显跳帧。

交互实现

页面的核心交互是“滚动驱动画面”。当用户没有开始滚动，首屏会自动循环播放前 5 秒的小马眨眼段；当用户开始滚动时，页面会从当前自动播放到的那一帧继续往后播放，避免从第 0 帧重新开始造成跳跃。

滚动节点被拆成 8 个场景，每个场景都有对应的英文标题、中文短文案和按钮状态。页面还加入了右侧进度点、滚动阻尼、帧预加载和移动端排版适配。

实现里最容易出问题的是“接续感”。首屏自动播放、用户第一次滚动、移动端快速滑动，这几个状态如果处理不好，小马会突然跳回起点，或者文字节点先变、画面还没跟上。后来我把自动播放帧和滚动帧接到同一个进度系统里，再提前加载相邻帧，才把这种断裂感压下来。

性能与发布优化

原始视频文件约 83MB，不适合直接提交到 GitHub，也不适合作为 Cloudflare Pages 的单个静态资源。最终网页采用图片序列帧方案，并在发布前将帧素材优化为 1600×900、24fps 的 JPEG 序列。

发布版共 1160 张帧图片，总体积约 45MB，单张图片最大约 76KB。原始视频、分析文件和教程素材都被排除在仓库之外，只保留网页运行所需文件。同时通过 Cloudflare 的 _headers 配置，让 frames/ 下的静态帧走长期缓存。移动端没有追求和桌面完全相同的信息密度，而是优先保证角色不被文字遮住、首屏能尽快出现。

网站发布

最终作品发布为一个可公开访问的网站：xm.karry.asia。项目源码托管在 karry1155/happy-little-horse-scroll，并通过 Cloudflare Pages 静态托管发布到公网。

产出内容

• 白色小马角色形象和视频叙事方向
• 约 48 秒 AI 视频 Demo 的网页化落地
• 8 个滚动场景、canvas 序列帧播放和首屏自动循环
• 桌面与移动端适配、帧资源压缩和 Cloudflare 缓存配置
• GitHub 仓库发布与 Cloudflare Pages 托管
• 公网访问地址 xm.karry.asia