feat(registry): add the gyro gallery block

[moshiur01]

Adds Gyro Gallery, a showcase of gallery tiles riding three counter-rotating orbits, like the rings of a gyroscope. It's built around the pointer, and the interaction was reworked twice in review for usability. It ships with gallery media.

The block

• Three concentric rings on one tilted plane, 24 tiles in all (5, 8 and 11), with the middle ring running against the other two. Tiles spiral out of the centre as the block arrives while the rings tip back from face-on.
• Pointer: the whole rig turns to face the cursor, and the rings calm to about a fifth of their speed while the pointer is over the gallery.
• Focus by proximity: the tile nearest the pointer, within 130px, comes forward, so a moving tile never has to be hit exactly. A rival has to be clearly closer to take focus, so it doesn't flicker.
• Focused piece: the rings stop and the rig stops turning, so it stays under the cursor. It drifts out to meet the cursor, grows, and takes a lime outline; a spoke draws from the core to it and a label rides beside it.
• Open: a click anywhere opens it (Ctrl/Cmd for a new tab). On touch, the first tap focuses and the second opens.
• Drag: a sideways drag throws the spin, which winds back down on its own. A drag never opens a tile.
• Scroll: page scroll winds the rings and swivels the plane, and scroll speed flings them. Nothing is pinned.
• Sidebar icon atom (spin).

Worth calling out in review

• No overlap, by construction. Early versions tilted each ring separately, and they crossed on screen and stacked tiles. Concentric rings on a shared plane can't cross, and the gaps stay wider than a tile at the steepest the pointer and scroll can tip the rig. Measured in headless Chrome: zero overlapping pairs across every pointer corner and scroll position.
• Framed every frame. A leaned-back ring is lopsided (its near half is bigger and lower), so it read low and clipped in the full-window preview. The rig now measures its real projected extent and centres and fits itself.
• Scroll where nothing scrolls. In /preview the block fills the window and the page can't move, so scroll-driven motion never fired. The wheel or a vertical swipe over the gallery now drives it there, counted only when the page itself didn't scroll, so a scrolling page isn't driven twice.
• Projected, not nested 3D. Each tile's position is solved in 3D and projected, so tiles always face the viewer and only 2D transforms change each frame.
• Tween UI content: the default tiles are the site's own gallery posters, linking to their pages.
• Gallery media: trimmed to 9.4s of interaction. The system pointer, the dev badge, the recording border and the browser status bar are removed. Clip 295 KB (from 10 MB), poster 11 KB.

The rig is aria-hidden behind a visually-hidden list of links, and the focused piece is announced politely. Under prefers-reduced-motion: reduce there's no intro, spin, turn or scroll motion, but proximity focus, the spoke and the label still work.

Checks

Typecheck is clean, registry:build passes, and the full suite passes (980 tests, 11 new). Interaction was verified in headless Chrome with real mouse and wheel input. next build was not run locally.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
tween-ui	Ready	Preview	Oct 7, 2026 7:19am UTC