
| Channel | Native caption |
|---|---|
| Tiktok | Build log, week eighteen. We shipped a single-canvas scroll site, the whole page is one 3D scene. Old way: stacked flat image blocks. What broke: it dropped to 12fps on a laptop. Next, we tie the scroll position to navigation. (AI-assisted) |
| Build log, week 18. Shipped: a one-canvas scroll site, the whole page is one 3D scene. Old way: stacked flat image blocks. What broke: 12fps on a laptop. Next: scroll drives the nav. #buildinpublic #webgl #threejs #frontend #webdev | |
| Build log, week eighteen. Shipped: a single-canvas scroll experience. The whole front door is one continuous 3D scene instead of stacked flat image sections down the page. What broke: performance. The scene tanked to twelve frames a second on a laptop. Worth saying out loud, the demo looked great until a normal machine touched it. Next: we let the scroll position drive the navigation, so the page is one living scene you steer. Build notes are public on purpose. | |
| X | Build log, wk 18. Shipped: a one-canvas scroll site, the whole page is one 3D scene. Old way: stacked flat image blocks. Broke: 12fps on a laptop. Next: scroll drives the nav. |
| Build log, week eighteen. We shipped a single-canvas scroll site this week, where the whole front door is one continuous 3D scene instead of stacked flat image sections. What broke: performance, it tanked to twelve frames a second on a laptop. Next up, we tie the scroll position to navigation so the page is one living scene. Follow along, we share the breaks too. | |
| Threads | Build log, week 18. Shipped: a single-canvas scroll site, the whole front door is one continuous 3D scene. Old way: stacking flat image sections down the page. What broke: it dropped to 12 frames a second on a laptop. Next: scroll position drives the navigation. |
| Build log for a one-canvas 3D scroll website: what shipped, what broke, and the fix. We replaced stacked flat image sections with a single continuous WebGL scene, hit a 12fps performance wall on a laptop, and are now tying scroll position to navigation. Web development build notes for front-end and creative developers. | |
| Bluesky | Build log, wk 18. Shipped: a one-canvas scroll site, the whole page is one 3D scene. Old way: stacked flat image blocks. Broke: 12fps on a laptop. Next: scroll drives the nav. |
| Youtube | Title: Build Log: A One-Canvas 3D Scroll Site (What Shipped, What Broke) Week eighteen build log. We shipped a single-canvas scroll experience where the whole front door is one continuous 3D scene instead of stacked flat image sections. Then it broke: the scene tanked to twelve frames a second on a laptop. Next we tie scroll position to navigation. Honest build notes, breaks included. |
| # | Layer (comp_id · still · tier) | Beat | Timecode | Motion | Logo | Audio | VO / on-screen / caption |
|---|---|---|---|---|---|---|---|
| 1 | ![]() matches intent shared field signature-3d | open | 0–6.9s | spatial-parallax | icon·liquid-chrome | ♪ bed_in | Week eighteen. We shipped a single-canvas scroll experience this week, the whole site is one continuous three-D scene. on-screen: Shipped: a one-canvas scroll site |
expected on screen: red ground · box hero in the shared Signal Field · Faber leads · node-graph · spatial-parallax · icon·liquid-chrome logo · caption bottom-left spec (the prompt): comp_id shared Signal Fieldvisual node-graphshape boxground redtreatment liquid-chromemotion spatial-parallaxpower summoninstrument summon→Shipped: a one-canvas scroll site | |||||||
| 2 | ![]() matches intent JsonDiff template | build | 6.9–11.9s | type-on | icon·white-knockout | ♪ node_lock | The old way was stacking flat picture blocks down the page, one heavy image after the next. on-screen: Old way: stacked image sections |
expected on screen: red ground · a JsonDiff panel over a dimmed Signal Field · Faber leads · code · type-on · icon·white-knockout logo · caption bottom-left spec (the prompt): comp_id JsonDiffvisual codeshape boxground redtreatment white-knockoutmotion type-onpower summoninstrument draw-on→Old way: stacked image sectionscurate codeLines, fileName, lines | |||||||
| 3 | ![]() matches intent StackTrace template | diff | 11.9–16.9s | crossfade-8f | icon·liquid-chrome | ♪ node_lock | It broke on performance. The scene tanked to twelve frames a second on a laptop. on-screen: What broke: it dropped to 12fps |
expected on screen: red ground · a StackTrace panel over a dimmed Signal Field · Faber leads · code · crossfade-8f · icon·liquid-chrome logo · caption bottom-left spec (the prompt): comp_id StackTracevisual codeshape boxground redtreatment liquid-chromemotion crossfade-8fpower morphinstrument morph→What broke: it dropped to 12fpscurate codeLines, errMsg, errType, fix, frames | |||||||
| 4 | ![]() matches intent WireframeMock template | step | 16.9–22.9s | kinetic-build | icon·white-knockout | ♪ node_lock | Now the front door is one living scene. Next, we let the scroll position drive the navigation. on-screen: Next: tie scroll to navigation |
expected on screen: red ground · a WireframeMock panel over a dimmed Signal Field · Faber leads · pipeline · kinetic-build · icon·white-knockout logo · caption bottom-left spec (the prompt): comp_id WireframeMockvisual pipelineshape boxground redtreatment white-knockoutmotion kinetic-buildpower throwinstrument laser-trace→Next: tie scroll to navigationcurate stages, steps | |||||||
| 5 | ![]() first render · fix pending ComparisonTable templatedead_airgeneric_scene | proof | 22.9–27.9s | receipts-count | icon·liquid-chrome | ♪ node_lock | Build Log |
expected on screen: red ground · a ComparisonTable panel over a dimmed Signal Field · Faber leads · receipts · receipts-count · icon·liquid-chrome logo · caption bottom-left spec (the prompt): comp_id ComparisonTablevisual receiptsshape boxground redtreatment liquid-chromemotion receipts-countpower receiptsinstrument spotlight→Build Logcurate colA, colB, rows, statsLabels | |||||||
| 6 | ![]() first render · fix pending shared field signature-3ddead_airgeneric_scene | resolve | 27.9–32.9s | coalescence | icon·liquid-chrome | ♪ bed_out | Build Log |
expected on screen: red ground · box hero in the shared Signal Field · Faber leads · coalescence · coalescence · icon·liquid-chrome logo · caption bottom-left spec (the prompt): comp_id shared Signal Fieldvisual coalescenceshape boxground redtreatment liquid-chromemotion coalescencepower coalescenceinstrument coalescence→Build Log | |||||||