The library

Techniques, not templates

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

01 / 16

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 / 16

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

03 / 16

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

04 / 16

3D Flip Card with CSS

A responsive 3D card that flips on hover, revealing its back face with a smooth, spring-like animation, using pure CSS perspective and transform properties.

animationcsshovercard3dtransform

05 / 16

Magnetic Parallax Button

A button that subtly follows the cursor with a magnetic pull, featuring a parallax effect on its inner label for added depth. It smoothly springs back to its original position when the cursor leaves.

animationhoverjavascriptbuttonparallaxmagnetic

06 / 16

Spotlight Card Glow with Cursor

A sleek card component featuring a dynamic radial glow that follows the user's cursor, illuminating both the card's surface and its border. This effect is achieved using CSS custom properties for cursor position and layered radial gradients with advanced masking.

animationcsshovergradientjavascriptpointer

07 / 16

Zebra Stripe Table with Hover Highlight

Achieve elegant, instantly readable data tables with automatic zebra striping using CSS `nth-child(even)` and a subtle hover highlight. No manual row classes are needed, ensuring the pattern remains correct even when data changes.

cssui/uxhovertablezebra stripingnth-child

08 / 16

CSS Holo Card Shimmer Effect

A credit card-like element with an iridescent, oil-slick finish that appears to shimmer and reflect light as it's hovered, creating a captivating holographic effect purely with CSS gradients and transforms.

animationcssgradientshovercard3d

09 / 16

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

10 / 16

CSS :has() Gallery Spotlight

Demonstrates the CSS :has() selector by creating a gallery where hovering over one item dims all other items, effectively spotlighting the hovered element purely with CSS.

csshoverinteractionselectorhasgallery

11 / 16

Glass + Glow Button

A modern button design featuring a translucent gradient background, a blurred backdrop-filter for a glass-like appearance, and a vibrant glowing shadow. It reacts subtly on hover and reveals an animated background blur.

animationcsshoverbuttonglassmorphismglow

12 / 16

CSS Overlapping Avatar Stack

A group of circular avatars that overlap using negative margins, smoothly fanning out with a positive margin on hover. This effect is achieved with pure CSS, utilizing flexbox and transitions.

csslayouthoverflexboxtransitionavatars