BONEYARD · part · corridor

Rings

src/32-rings.js · one module, no third-party code

Designed still Focus preview for keys

ParametersFactory

How it works

Each portal is a shallow 3-D object. A faceted outer rim and inset aperture are built on front and back planes, rotated around all three axes, then projected through the shared vanishing point. The quadrilateral between outer and inner vertices is a panel; front-to-back quads make the frame's thickness. Alternating panel values, small gaps and hinge nodes keep the construction readable when a portal fills the phone screen. Four rails join matching vertices down the ordered corridor, which supplies the spatial evidence missing from repeated flat rings.

Progress moves the camera through a wrapped depth span. Frames fade only as they cross the near plane, then reappear at the far end. Full motion warms the nearest frame and adds restrained shared shake in proportion to real ride speed. Calm travels less distance, removes heat and shake, reduces panel faces and rails, and keeps every portal. Every count, facet and depth input is bounded before allocation or projection.

Provenance

technique: a 1/z corridor of articulated polygonal portals: front and back rims, inset apertures, panel faces and rails
lineage: the demoscene dot tunnel (Amiga and PC intros, about 1991); the 1/z projection it shares with every starfield of the era; faceted vector portals in early 3-D arcade flight displays
original: each old dot ring is treated as a physical portal with depth, individually pitched, yawed and rolled; four longitudinal rails join the frames, panel gaps and hinge nodes reveal assembly, and each portal grows past the camera before wrapping to the far end, all scrubbed only by scroll progress
not: a time-looping screensaver, a raster tunnel, a texture-mapped tube, or a stack of flat concentric circles.
deps: none · Canvas 2D · 2026-09
budget: 1.14 ms/frame @ 1050x852 desktop; 0.77 @ 390x439 portrait, Local Chromium 149, parts average under 4x CPU slowdown (2026-09-30); JS work only, not a real-GPU frame
api: mount(canvas, params, ctx) -> { tick(dt, t, progress, pointer), resize(w, h, dpr), still(t), destroy() }
license: MIT, Desert Data Labs LLC

Budget: 1.14 ms/frame @ 1050x852 desktop; 0.77 @ 390x439 portrait, Local Chromium 149, parts average under 4x CPU slowdown (2026-09-30); JS work only, not a real-GPU frame