The library

Techniques, not templates

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

1 / 2

Stop Layout Jump with scrollbar-gutter

When content grows enough to need a scrollbar, the browser carves that width out of the element and everything inside shifts sideways. scrollbar-gutter: stable reserves the gutter up front, so the scrollbar appears into space that was already set aside and nothing moves. Both panels here gain and lose the same content — only the left one lurches.

csslayoutscrollingscrollbar-gutterlayout shift

2 / 2

Table Sort Header Stability

Prevents layout shifts in sortable table headers by reserving space for the sort icon using `opacity` instead of removing it from the DOM. Includes hover and active states for discoverability.

cssaccessibilityhovertablelayout shiftsortopacity