For the whole page content
A page that scrolls on the face of a cube.
CubeBend is a single Framer code component. Drop it anywhere on a page and, on mount, it adopts every other layer into its own viewport-fixed scroller, nothing to connect, nothing to restructure.
A chain of hinged segments, not one rotation
Each edge is a chain of thin bands, every band rotated a fraction of the total angle around the band above it. With enough bands, the crease reads as a rounded cylinder rather than a hard cube edge. The first band, the one touching the hinge line, is deliberately left flat; a real bend starts tangent to the flat face, and it makes the hinge a junction of two unrotated layers, which is where seams would otherwise show.
The flat face and the folds move on the same frame
Nothing scrolls natively. A sticky element stays pinned to the scrollport, and a single request Animation Frame loop reads the scroll position and writes every transform, the flat content, and all of the fold clones in the same frame. Letting the middle scroll on the compositor while the clones were positioned on the main thread put the two out of step, and the image tore at the hinge during fast scrolling.
The scroll value is clamped at both ends. Elastic overscroll drives scrollTop out of range on a hard flick, which pushes the flat content clear of its clip box and unpins the sticky element mid-gesture, the reason the effect only ever broke at the very top and the very bottom.
Copies of the page, stripped of everything that bites
Every band shows a copy of the page. Before insertion, each copy loses its IDs, so duplicates cannot break label/for and anchor targets in the real content; gains inert, so a keyboard visitor does not tab through a dozen aria-hidden navigations; and gives up its iframe, video, and audio sources, so embeds are not requested or autoplayed, once per band.
Cloning is expensive, so it never runs on a scroll frame. Refreshes are debounced and deferred until scrolling stops, and the per-frame transform is applied to a wrapper rather than the observed node; writing a style on the observed node made every frame look like a content change and re-cloned the whole page sixty times a second.
What owning the page costs
The overlay applies a 3D transform, so position: fixed descendants, sticky navigations, floating CTAs, cookie banners, resolve against the overlay rather than the viewport, and in-page anchor links and window.scrollTo no longer drive the scroll. Only one instance may own a page: a second one warns, hides itself and leaves the page untouched. Reduced-motion preferences disable smoothing, tumble and tilt.
Need the React file of this Bend Effect? Get it from here.