[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-93343":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":15,"starSnapshotCount":15,"syncStatus":17,"lastSyncTime":26,"discoverSource":27},93343,"kubeez-scroll-world-video","KubeezMedia\u002Fkubeez-scroll-world-video","KubeezMedia","Scroll-scrubbed 'fly through the world' burger demo, generated with Kubeez. Live: meepcastana.github.io\u002Fkubeez-scroll-world-video","https:\u002F\u002Fkubeezmedia.github.io\u002Fkubeez-scroll-world-video\u002F",null,"JavaScript",654,4,202,0,140,2,73.1,false,"main",true,[],"2026-07-22 04:02:08","# 🍔 Kubeez Scroll-World-Video — *Smash & Co.* demo\n\n> A scroll‑scrubbed **\"fly through the world\"** landing page. As you scroll, a pre‑rendered\n> camera glides forward through a miniature clay **burger world** — market → grill → counter →\n> the burger — as one continuous shot, no cuts. **Every frame was generated with\n> [Kubeez](https:\u002F\u002Fkubeez.com).**\n\n### ▶️ **[Live demo → kubeezmedia.github.io\u002Fkubeez-scroll-world-video](https:\u002F\u002Fkubeezmedia.github.io\u002Fkubeez-scroll-world-video\u002F)**\n\n![Smash & Co. — scroll-world-video showcase](img\u002Fshowcase.gif)\n\n\u003Csub>▶ **[Watch the full 20-second video](https:\u002F\u002Fkubeezmedia.github.io\u002Fkubeez-scroll-world-video\u002Fimg\u002Fshowcase.mp4)** · or scroll the **[live demo](https:\u002F\u002Fkubeezmedia.github.io\u002Fkubeez-scroll-world-video\u002F)** yourself.\u003C\u002Fsub>\n\n---\n\n## What it is\n\nScroll doesn't move a page here — it **drives a camera**. Each scene is a short pre‑rendered\nvideo; the engine maps your scroll position to the video's `currentTime`, so scrolling scrubs\nthe camera forward through the world. Between scenes, dedicated **transition clips** glide the\ncamera from one place to the next, so the whole journey reads as a single continuous flight.\n\n| The world | Landing (Market) | The Counter | The Burger |\n|---|---|---|---|\n| ![](img\u002Fworld.png) | ![](img\u002Flanding.png) | ![](img\u002Fcounter.png) | ![](img\u002Ffinale.png) |\n\n---\n\n## How it was built (the tutorial)\n\nThe entire thing — stills, motion, everything — was generated on the **Kubeez** platform. No\nexternal tools. Here's the pipeline:\n\n### 1. Stills — one coherent world\n- A **master world still** (`gpt-image-2`, text‑to‑image) sets the palette, angle and light.\n- Each **scene still** (Market, Grill, Counter, Hero Burger) is derived from the master with\n  **image‑to‑image** so they all share one look.\n\n### 2. Dive clips — fly into each scene\n- Each scene still is animated with **Seedance 2 Fast (720p)**, `image-to-video`: the camera\n  begins high and wide, then glides forward and descends into the scene.\n\n### 3. Transitions — the part that makes it feel continuous ✨\nThis is the technique that matters. For each pair of consecutive dives:\n\n```\ntransition.firstFrame = the ACTUAL last frame of dive N   (extracted from the rendered mp4)\ntransition.lastFrame  = the ACTUAL first frame of dive N+1 (extracted from the rendered mp4)\n```\n\nFeed those two real frames to **Seedance 2** as keyframes with a **gentle forward‑glide**\nprompt, and it fills the in‑between. Because the transition *starts* on dive N's real last\nframe and *ends* on dive N+1's real first frame, **the seams are frame‑exact** — the engine\nplays `dive1 → transition1 → dive2 …`, so scrolling off the end of a dive kicks off its\ntransition with no visible cut.\n\n> **The one rule:** keep the transition a **low, continuous forward glide.** Do *not* prompt\n> it to \"pull up \u002F rise into the sky \u002F fly to a map view\" — that camera reversal reads as a\n> jarring *jump* when scrubbed, even with perfect seams. If two scenes are far apart, give the\n> transition a **longer duration** (7–10s) so the move stays slow and smooth.\n\n### 4. Encode for smooth scrubbing\n- Native resolution, `crf 20`, small GOP (`-g 8`), light sharpen, no audio, faststart.\n- The engine loads each clip as a **Blob** and scrubs `currentTime`, so smooth seeking works\n  even on static hosts (like GitHub Pages) that don't serve HTTP byte ranges.\n\n### 5. Wire the engine\nThe whole page is one config object passed to a portable, dependency‑free vanilla‑JS engine:\n\n```html\n\u003Cscript src=\"assets\u002Fscrub-engine.js\">\u003C\u002Fscript>\n\u003Cscript>\n  mountKubeezWorld(document.getElementById('world'), {\n    brand: { name: 'Smash & Co.' },\n    sections: [ \u002F* market, grill, counter, burger — copy + accent per scene *\u002F ],\n    connectors: [ 'assets\u002Fvid\u002Fconn1.mp4', 'assets\u002Fvid\u002Fconn2.mp4', 'assets\u002Fvid\u002Fconn3.mp4' ],\n  });\n\u003C\u002Fscript>\n```\n\nThe engine handles scroll→time mapping, blob loading, lazy prefetch, frame‑matched crossfades,\npinned per‑section copy, the route rail, `prefers-reduced-motion`, and phone hardening.\n\n---\n\n## The clips\n\n| Section | Model | Notes |\n|---|---|---|\n| Market \u002F Grill \u002F Counter \u002F Burger dives | Seedance 2 Fast · 720p | `image-to-video` from each scene still |\n| Transitions (×3) | Seedance 2 Fast · 720p | keyframed from real boundary frames; conn3 is 7s |\n| Stills | gpt‑image‑2 | master + image‑to‑image scenes |\n\nRoughly ~1,150 Kubeez credits for the full 720p build.\n\n---\n\n## Build your own — install the skill\n\nThis demo was produced by the **`scroll-world-video`** skill, which interviews you for your\ntopic + brand, generates the world, and wires this exact engine — for *any* business.\n\n**Claude Code** (installs the plugin and auto-wires the Kubeez MCP):\n```\n\u002Fplugin marketplace add KubeezMedia\u002Fkubeez-scroll-world-video\n\u002Fplugin install scroll-world-video@kubeez\n\u002Fscroll-world-video\n```\n\n**Codex \u002F Cursor \u002F other agents:** point your agent at\n[`skills\u002Fscroll-world-video\u002FSKILL.md`](skills\u002Fscroll-world-video\u002FSKILL.md) and connect the\nKubeez MCP — see [`AGENTS.md`](AGENTS.md).\n\n> ⚡ **Powered by Kubeez.** The scroll engine and method are open, but the skill generates\n> *only* through the [Kubeez](https:\u002F\u002Fkubeez.com) platform (`mcp.kubeez.com\u002Fmcp`) — that's what\n> turns your idea into a world. Sign in with a Kubeez account to run it.\n\n## Run it locally\n\nThe engine fetches clips as blobs, so serve over HTTP (not `file:\u002F\u002F`):\n\n```bash\npython -m http.server 8080\n# open http:\u002F\u002Flocalhost:8080\n```\n\n---\n\n\u003Csub>Made with [Kubeez](https:\u002F\u002Fkubeez.com). All imagery and motion generated on the Kubeez platform.\u003C\u002Fsub>\n","这是一个基于滚动驱动的交互式3D场景视频演示项目，实现用户滚动页面时实时‘ scrub ’预渲染视频帧，模拟穿越微型黏土汉堡世界的连续飞行镜头。核心采用 scroll-scrubbing 技术将滚动位置映射到视频 currentTime，结合帧精确拼接的过渡片段（transition clips）实现无缝场景切换；所有视觉素材均由 Kubeez 平台通过文生图、图生图及图生视频流程生成，无需传统3D建模或前端动画框架。适用于品牌落地页、创意营销展示、轻量级交互式叙事等对视觉表现力要求高但需兼顾加载性能与开发效率的场景。","2026-07-17 02:30:03","CREATED_QUERY"]