The library

Techniques, not templates

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

01 / 13

Drag-to-Reorder That Opens a Gap

What sells a sortable list is not the row you are holding — it is what the other rows do. Swap them the instant you cross a boundary and the list flickers; instead, every row past the drop target shifts by exactly one row height, and the gap that opens up is the drop indicator. Two details carry it: transform rather than top or margin, so the shift stays composited at fifty rows, and a short transition, because anything over about 0.2s lags behind your finger and reads worse than no animation at all.

animationcssui/uxjavascriptinteractiondrag and drop

02 / 13

Block Text Selection with user-select

One declaration decides whether a pointer drag paints a text selection or does what your UI meant it to do. user-select: none is what keeps a drag handle, a reorderable row or a game surface from turning into a highlighted mess halfway through the gesture. The lock here is a checkbox and :has(), so switching it is pure CSS — try selecting the text in both states.

cssui/uxinteractionuser-select:has()

03 / 13

Blend Any Two Colours with color-mix()

Mixing two colours used to mean a preprocessor function or hand-computed hex values. color-mix() does it in the browser: name a colour space, two colours, and how much of the first one you want. Drag the slider and watch the result bar and the declaration change together — the bar's background is the very color-mix() call printed underneath it.

csscolorcolor-mixinteractionslider

04 / 13

Composer That Opens on :focus-within

The toolbar and submit button stay out of the way until the field they belong to is actually in use. :focus-within matches an element while focus sits anywhere inside it, so the wrapper can expand its own actions row the moment the textarea takes focus — collapsing max-height and opacity, no state to track.

cssrevealtextareaformsinteraction:focus-within

05 / 13

Cards That Restyle Themselves with :has()

A parent cannot normally react to its own children, which is why this pattern used to need JavaScript. :has() turns the relationship around: label:has(:checked) styles the whole card from the state of the input inside it. One selector, no classes to toggle, no listeners — CSS reading its own subtree like an if-statement.

cssformsinteraction:hascheckboxselectors

06 / 13

Continuous Date Range Picker

This UI component demonstrates how to visually represent a selected date range in a calendar. The start and end dates of the range feature rounded 'caps', while all intermediate dates maintain square corners, creating a continuous, flowing highlight effect.

cssborder-radiusinteractioncalendarrange selectiondate picker

07 / 13

Synced Scrubber with Preview

This demo illustrates a video scrubber with a draggable thumb and a floating preview thumbnail. All moving parts—the progress bar fill, the draggable thumb, and the preview bubble—are synchronized by a single CSS custom property, ensuring smooth and coordinated movement.

javascriptcss-variablesinteractionrange-sliderplayerdynamic-styles

08 / 13

Swipeable Card Stack with Depth Effect

Recreates a satisfying swipeable card stack interaction where the top card is flung away, revealing the next card which smoothly rises into position with a depth effect. Utilizes CSS transforms for scaling, translation, and rotation, managed by JavaScript for interaction.

animationui/uxinteractiontransformscss variablescard stack

09 / 13

Material Ripple from Tap

Recreates the Material Design ripple effect on a button. The ripple originates precisely from the user's click point and expands outwards while fading, clipped neatly by the button's boundaries.

animationcssjavascriptbuttonclickinteractionripple

10 / 13

CSS Grid FR Accordion

Animate accordion panels smoothly to any content height using CSS Grid's `fr` unit. This technique avoids fixed `max-height` values or JavaScript height measurements, providing a fluid and adaptable expansion.

animationcssgriduiaccordioninteraction

11 / 13

Swipe to Reveal Actions

A fluid, native-feeling interaction where swiping a list item to the left reveals hidden action buttons behind it, which then snap open or spring back closed.

animationjavascriptlistinteractionswipedragcss transform

12 / 13

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