feat(registry): add the gallery-tunnel depth block - #3113
Closed
miguel-heygen wants to merge 1 commit into
Closed
Conversation
A square corridor receding to a vanishing point, its faces tiled with colour slabs and images that swell toward camera and pass. Depth is the catalog's largest gap, and this is the only depth move whose panels are content slots, so it carries a shot rather than decorating one. Everything keys off one integer: the absolute segment number in a pool slot at the current distance. Rhythm, visibility, colour and image choice all derive from a hash of that number, so a segment carries identical panels however it is scrubbed to. The reference's sequential colour and image counters are gone, along with its camera-chase lerp, which under a constant rate only contributed a fixed lag. The recycle boundary is derived from the fog distance rather than duplicated, so a segment reappears exactly where fog reaches the backdrop and moving the fog moves the boundary with it. Verified on a zoom crop across several recycle events: slabs emerge from black and brighten monotonically, nothing pops in. Two bugs surfaced while building it. Composition variables are read from the authored attribute rather than the runtime bag, which is undefined when an inline script runs and silently resolved every string variable to empty. And image panels are laid out at natural size inside a clipped well, because a CSS-sized img uploads a 1x1 texture: the browser samples the laid-out size, not the natural one.
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Workflows to automatically generate PRs for you. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| var el = document.createElement("img"); | ||
| el.id = "gt-img-" + k; | ||
| el.alt = ""; | ||
| el.src = src; |
3 tasks
Collaborator
Author
|
Superseded by #3116, which carries all five video primitives in one PR as requested. Same commits, same verification; nothing dropped. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
gallery-tunnel: a square corridor receding to a vanishing point, its faces tiled with colour slabs and images that swell toward camera and pass.Why
Depth is the catalog's largest gap. This is also the only depth move whose panels are content slots — a caller supplies their own screenshots — so it carries a shot rather than decorating one.
How
Three.js rather than CSS 3D. CSS 3D would have needed hand-rolled substitutes for three things the design makes load-bearing: perspective-correct texture mapping on wall panels, per-fragment linear fog, and a depth buffer. Edges are real tube geometry, so they thicken with perspective; a CSS border would not.
Everything keys off one integer: the absolute segment number in a given pool slot at the current distance. Rhythm, slot visibility, colour-vs-image and both indices all derive from a hash of that number, so a segment carries identical panels however it is scrubbed to. The reference's sequential colour and image counters are gone, as is its camera-chase lerp, which under a constant rate contributed only a fixed lag.
The recycle boundary is derived from the fog distance rather than duplicated:
BACK = clamp(15 - fogFar, 0, 1.5). A segment reappears exactly where fog reaches the backdrop, so moving the fog moves the boundary with it instead of desynchronising two constants.Two bugs found and root-fixed
window.__hyperframesis undefined when an inline composition script runs. Every string variable silently resolved to empty, soimagesnever produced a single element and the content-slot capability was dead. Variables now come from the authoreddata-composition-variablesattribute, which is the source; the CSS custom property and runtime bag layer on top as overrides. This also removed a second owner, since defaults had been written twice.A CSS-sized image uploads a 1x1 texture. Chrome's
texImage2Duses the laid-out size, notnaturalWidth, so every image panel sampled one dark pixel — indistinguishable from black on a black backdrop. Images now keep natural layout size inside a clipped well, which also keeps the pageloadevent gated on decode. Isolated with a minimal three.js repro that passed, then bisected against the composition.Test plan
hyperframes checkpasses: 0 errors across lint, runtime, layout, motion and contrast.oxfmt --checkclean. The runtime warnings are llvmpipeReadPixelsnoise from software rendering.Frames were rendered and looked at at 0/1.5/3/4.5/6/7.5/9/11s. Panels swell from the vanishing point and exit past camera; the cross-section holds dead centre in every frame.
The far end was checked specifically, since a visible pop is the failure mode this design guards against: a 4x zoom crop of the centre across 5.00 to 5.25s, a window spanning several recycle events, shows the vanishing point pure black with slabs emerging from black and brightening monotonically. Nothing pops in.
Content does not visibly loop: geometry is 5s-periodic at the default speed, but content keys off an ever-increasing absolute index, so 0s and 5s differ.
Determinism, canvas bytes compared with images loaded: same frame twice, direct seek to 7.0 equals stepping 0 to 7.0 at 30fps, equals the same after rewinding to 0, equals the same after seeking backwards from 11.999.
Content slots verified two ways: as the block's own
imagesdefault and as a host CSS override, both rendering supplied screenshots contain-fit.Not covered
Only verified under software GL; the devbox has no hardware GPU. One frame is about 166ms there, and a real GPU will be far faster, but that is unmeasured.
Wall cells are portrait at the default grid, so a 16:9 screenshot letterboxes rather than filling. Deliberate, since contain-fit beats squashing, but a caller wanting edge-to-edge artwork will see gutters.
No catalog preview PNG; the mdx points at a URL that 404s until the upload script runs with the publishing profile.