L / MOTION LAB研究预览 · 2026.10.10
OPENLAVA × AIRBNB

让图标,
动起来。

一边看开源播放器的实际效果,
一边看 Airbnb 的官方设计展示。

OpenLava 是 LAVA 的独立实现,
不是另一种动画格式。

01

OpenLava

独立开源实现 · WebGL 实播

↗
◌

播放仓库示例

素材直接从原仓库读取,
仅供观察格式兼容与播放效果。

透明背景 · AVIF
— / —
180 × 162像素尺寸
30 fps素材帧率
1.70 s动画时长
151 KiB文件合计

点击加载后,可暂停、逐帧观察和切换背景。

02

Airbnb LAVA

官方发布视频 · 原始设计参考

↗

看造型,也看使用场景。

房屋、热气球、服务铃等立体图标,配合短促的入场与选中反馈。原版效果以 Airbnb 官方发布视频和实际页面为准。

视频保留官方播放器;若嵌入受地区或网络限制,可直接打开。这里没有移植 Airbnb 的专有播放器。

WHAT WE FOUND

同一种表现,
两种观察入口。

01 / 格式

图像切片,拼出每一帧

OpenLava 文档使用 JSON 清单和图像图集,通过矩形切片重建动画帧。3D 的外观来自素材,不是浏览器里的实时 3D 模型。

02 / 实现

开源播放器 ≠ 官方 SDK

OpenLava 提供 Web、Flutter 和 Swift 等实现。本页使用仓库 WebGL 播放器;并未找到 Airbnb 官方公开的 LAVA 播放器或编码工具。

03 / 素材

代码许可和图标许可分开

播放器代码为 MIT。仓库示例来自 Airbnb,另有使用限制;本页只做临时兼容性观察,素材不上传 Cloudflare。产品接入应使用自己的动画素材。

可核对的来源格式说明 ↗上游示例 ↗Airbnb 官方发布 ↗MIT 许可 ↗