Overview
A menu that behaves like it is being pushed around rather than switched on. Point at a row and a panel slides in from the edge you came from; leave downward and it retreats downward. Inside the panel a ribbon scrolls the row's own label alternating with a plate, and it holds still in space while the panel sweeps across it -- the two layers counter-translate by the same amount, which is the whole trick and the reason it does not read as an ordinary slide-in. The ribbon is CSS: two identical halves of a track animated to exactly minus one half its width, so the loop closes on itself with nothing measured, nothing timed and no dependency, and a window resize does not restart it. Hover, keyboard focus and touch press-and-hold all reach the same state, and the standalone export still reveals with its script deleted. Row count, copies, cycle time and direction are controls; so are the five colours behind the white-on-ink inversion, the type, and the plate geometry. Reduced motion stops the ribbon, not just the transitions. Edit it, then export one self-contained HTML file with no runtime dependencies.
Highlights
- The panel enters from the edge the pointer arrived at
- Counter-translated layers hold the ribbon still while the panel sweeps
- Seamless marquee in pure CSS -- no measurement, no timer, no dependency
- Hover, keyboard focus and touch reach the same state
- Six generated plates ship with the tool, nothing is hotlinked
- Reduced motion stops the ribbon, not just the transitions