The library

Techniques, not templates

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

01 / 24

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

02 / 24

Even Flex Lines with flex-wrap: balance

Greedy wrapping fills the first line and strands whatever is left, which is how a four-item nav ends up three across with one alone underneath. flex-wrap: balance asks the browser to spread the items evenly over the lines it needs instead — four items become two and two. Drag the panel's right edge to move the wrap point and watch the two lists disagree. Chrome 150 is the first to ship it, so the balanced list falls back to wrap elsewhere and says so.

csslayoutflexboxprogressive enhancementflex-wrap

03 / 24

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

04 / 24

Smooth Collapsing Sidebar with Flexbox Fixes

This demo illustrates how to create a collapsing sidebar that transitions smoothly, preventing text labels from wrapping and icons from squashing during the animation. It uses `white-space: nowrap` for labels and `flex-shrink: 0` for icons, combined with width and opacity transitions.

animationcsslayoutflexboxtransitionsidebardashboard

05 / 24

Highlighted Pricing Card

A three-column pricing table where the middle, 'popular' plan stands out with a larger scale, a glowing gradient border, and an accent badge. Numeric figures are aligned using tabular numbers for a clean, consistent look.

csslayouttypographygradientcardpricingtransform

06 / 24

Flexbox Expanding Gallery on Hover

A responsive gallery where hovering over a panel expands it, causing other panels to gracefully shrink. This effect is achieved purely with CSS flexbox and transitions, leveraging the `flex` property.

animationcsslayouthoverflexboxgallery

07 / 24

CSS Grid Bento Layout

This demo illustrates how to create a flexible 'Bento Grid' layout using CSS Grid, where tiles of varying sizes snap together. The core technique involves defining a grid, allowing specific tiles to span multiple columns and rows, and utilizing `grid-auto-flow: dense` to automatically fill any empty spaces.

csslayoutresponsivegridbentodense-packing

08 / 24

Performant CSS Animations: Transform vs. Left

This demo illustrates the performance difference between animating an element's 'left' property and its 'transform: translateX()' property. Animating 'left' forces the browser to re-calculate layout on every frame, leading to a 'janky' or stuttering effect. In contrast, 'transform: translateX()' allows the browser to offload the animation directly to the GPU, skipping layout and paint, resulting in a smooth 60fps animation.

animationcsslayoutperformancetransformgpu

09 / 24

Pure CSS Sticky Header in a Scroll Container

A header that smoothly sticks to the top of its parent scrollable container as content scrolls underneath, achieved purely with CSS position: sticky and without any JavaScript. This snippet demonstrates common pitfalls and correct implementation.

csslayoutscrollstickypositionnojsheader

10 / 24

Readable Line Length with `ch` unit

This trick demonstrates how to improve text readability by limiting line length using the CSS `ch` unit. Long lines make text hard to follow, while `max-width: 65ch` creates an ideal measure for comfortable reading.

csslayoutresponsivetypographyreadability

11 / 24

CSS Text Wrap: Balance & Pretty

This UI trick uses the new `text-wrap` CSS property to intelligently balance headlines and prevent orphaned words in paragraphs. Applying `text-wrap: balance` makes multi-line headings visually symmetrical, while `text-wrap: pretty` prevents a single word from appearing alone on the last line of a paragraph, enhancing readability and design aesthetics with zero extra markup.

csslayouttypographytextui-uxreadability

12 / 24

Minimal Data-Ink Bar Chart

A minimalist bar chart design demonstrating the data-ink principle. It highlights a single key data point with an accent color and direct labels, removing all 'chart junk' like gridlines, axes, and excessive borders for improved readability and focus.

csslayouttypographychartminimalismdataviz