The library

Techniques, not templates

Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.

1 / 2

Gliding Pill Nav, No Measuring

A pill that follows the pointer without measuring anything. The hovered link takes anchor-name: --pill, and the rail's ::before sets position-anchor: --pill and inset: anchor(top) anchor(right) anchor(bottom) anchor(left), so its four edges are that link's four edges: it becomes the link, wherever the link sits. Transitioning inset turns the jump into a glide. Two elements holding one anchor name is not an error, it is worse: the later one in the DOM quietly wins, so an active link at the end of the rail steals the pill back from anything hovered before it. While the rail has a hovered link, the resting link gives up the name. The rail carries no padding, no gap and square links, because hit testing follows border-radius and any dead pixel hands the pill back mid-glide.

animationcsslayouthoveranchor-positioningnavigation
2 / 2

Native Auto-Flipping Tooltip

A modern, zero-JavaScript tooltip that automatically positions itself relative to its trigger and flips its vertical alignment (above/below) if it's about to go off-screen, leveraging the native Popover API and CSS Anchor Positioning.

animationcssaccessibilityzero-jstooltippopoverhoveranchor-positioning