又一神级网页前端Skill开源，苹果官网的「沉浸式滚动飞行交互」每个人都能实现了

苹果是最注重设计的公司了，苹果官网那些炫酷的产品落地页非常震撼，手指在鼠标滚轮上滑过，镜头带你穿越进产品内部，视角无缝切换，没有任何生硬的转场切镜头。
这种高阶的沉浸式滚动飞行交互，之前真的是大厂专属。需要精密的3D建模、复杂的开发、严苛的镜头轨迹，还需要耗费很久逐帧调试。
今天推荐的这个Skill，可以把任何品牌转化成可滚动3D世界。

项目简介

Scroll World是一个开源skill，它能根据企业、产品或品牌的业务故事，生成一组风格统一的微缩场景和连续运镜视频，再把这些素材组合成一个由滚动进度控制的沉浸式落地页。
一家咖啡品牌可以把官网设计成咖啡庄园—烘焙工坊—城市门店—配送网络—咖啡产品的连续世界，一家物流公司可以让镜头依次穿过仓库、港口、运输车辆和全球配送中心。
访客滚动页面时，实际上是在控制预渲染视频的播放进度，从而获得类似摄影机在3D世界中不断飞行的效果。
DEMO

看了DEMO，你就知道这个skill的价值了，想让AI直接去做这样一个前端是很难的。

功能特点

品牌业务自动拆解
Scroll World不只是生成几张好看的图片，在正式制作前，它会先了解项目主题、品牌名称、核心卖点、品牌色彩、视觉风格以及页面需要讲述的业务流程，然后将这些信息整理成一组具有先后顺序的场景。每个场景都可以对应一个业务环节、一项产品能力，或者一个品牌故事节点。
滚动页面，就是控制摄影机
Scroll World最核心的交互就是让页面滚动进度与视频播放进度绑定。
用户向下滚动，摄影机便向前飞行，停止滚动，画面随之停下，反向滚动，镜头也可以沿原来的路径后退。
这种交互让访客从被动观看者变成了主动探索者，把内容节奏交到了用户手中。
多场景之间实现连续衔接
要让多个独立生成的场景看起来像一次完整飞行，最难处理的地方是场景接缝。
Scroll World会给每个场景生成一段进入镜头，并在相邻场景之间额外生成连接视频。连接片段使用前后视频的实际边界帧作为条件，尽量确保接缝两侧的画面完全一致，从而减少场景切换时突然跳动或闪烁的问题。
不绑定前端技术栈
Scroll World提供了一套基于原生JS的滚动控制引擎，并且由配置驱动。
生成结果可以集成到普通HTML页面，也可以放进 Next.js、Vue、Python网站中。不要求开发者用某一种固定框架。
项目链接

https://github.com/oso95/scroll-world