一个滚动触发的着陆页,通过滚动驱动摄像机在预渲染的粘土汉堡世界连续视频中飞行,完全基于 Kubeez 平台构建。

Stars

596

7 天增长

暂无数据

Fork 数

4

开放 Issue

0

开源协议

暂无数据

最近更新

2026-07-14

AI 仓库情报摘要
FR-AI / ANALYSIS

为什么值得关注

它展示了一种利用帧精确过渡实现无缝滚动视频导航的新技术,并提供了开源引擎和技能供他人复现。

适合谁使用

  • 营销人员
  • 网页开发者
  • 创意机构
  • 内容创作者

典型使用场景

  • 交互式产品导览
  • 叙事型着陆页
  • 虚拟漫游
  • 博物馆展览

项目优势

  • 帧精确过渡消除视觉断点
  • 轻量级原生 JavaScript 引擎
  • 开源且提供清晰的管线教程
  • 使用预渲染视频实现流畅的拖拽式播放

使用前须知

  • 内容生成需要专有的 Kubeez 平台
  • 无法完全自主托管视频创作
  • 预渲染场景限制了实时的动态变化

README 快速开始

🍔 Kubeez Scroll-World-Video — Smash & Co. demo

A scroll‑scrubbed "fly through the world" landing page. As you scroll, a pre‑rendered camera glides forward through a miniature clay burger world — market → grill → counter → the burger — as one continuous shot, no cuts. Every frame was generated with Kubeez.

▶️ Live demo → kubeezmedia.github.io/kubeez-scroll-world-video

Watch the full 20-second video · or scroll the live demo yourself.


What it is

Scroll doesn't move a page here — it drives a camera. Each scene is a short pre‑rendered video; the engine maps your scroll position to the video's currentTime, so scrolling scrubs the camera forward through the world. Between scenes, dedicated transition clips glide the camera from one place to the next, so the whole journey reads as a single continuous flight.

The worldLanding (Market)The CounterThe Burger

How it was built (the tutorial)

The entire thing — stills, motion, everything — was generated on the Kubeez platform. No external tools. Here's the pipeline:

1. Stills — one coherent world

  • A master world still (gpt-image-2, text‑to‑image) sets the palette, angle and light.
  • Each scene still (Market, Grill, Counter, Hero Burger) is derived from the master with image‑to‑image so they all share one look.

2. Dive clips — fly into each scene

  • Each scene still is animated with Seedance 2 Fast (720p), image-to-video: the camera begins high and wide, then glides forward and descends into the scene.

3. Transitions — the part that makes it feel continuous ✨

This is the technique that matters. For each pair of consecutive dives:

transition.firstFrame = the ACTUAL last frame of dive N   (extracted from the rendered mp4)
transition.lastFrame  = the ACTUAL first frame of dive N+1 (extracted from the rendered mp4)

Feed those two real frames to Seedance 2 as keyframes with a gentle forward‑glide prompt, and it fills the in‑between. Because the transition starts on dive N's real last frame and ends on dive N+1's real first frame

项目描述

Scroll-scrubbed 'fly through the world' burger demo, generated with Kubeez. Live: meepcastana.github.io/kubeez-scroll-world-video

相关仓库与替代方案

根据分类、Topic 和编程语言匹配的相似项目。

react
精选
react GitHub avatar

react

React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.

Web 开发前端框架
246,741
tandpfun
精选
tandpfun GitHub avatar

wardrobe

A GPT‑image powered app that extracts individual garment cutouts from photos, organizes them into a digital wardrobe, and generates modeled outfit previews.

JavaScript
1,570
mshumer
精选
mshumer GitHub avatar

Claude-of-Duty

A browser-based first-person shooter built entirely with procedural generation and orchestrated AI agents, featuring 55k lines of Three.js/WebGL2 code and no art assets.

AI 与机器学习AI 智能体
1,234