The library

Techniques, not templates

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

01 / 15

3D Carousel: Rotate, Then Push

One rule places every card. rotateY() turns the card to its seat, which re-aims the card's own z axis outwards, and translateZ() then walks it along that new axis to the rim, so only --i changes. Swap the two and every card is pushed at the camera before it turns: the rotation swings one stack around the parent and you get a fan, not a ring. The radius is derived, not guessed. The cards are the sides of a regular polygon, each side one card plus one gap long, so r = (card + gap) / 2tan(180deg / n): pick the gap and the radius follows, which is why the count buttons set --n and nothing else. The spin is one keyframe on a registered --angle, so a drag can take the wheel and hand it straight back.

animationcssuicarouseljavascript3dinteractiontransformperspective

02 / 15

Before/After Slider Driven by a Range Input

A comparison slider where the whole drag is a native <input type="range">, stretched over the image at opacity 0. One line of JavaScript copies its value into --pos; clip-path: inset(0 0 0 var(--pos)) on the top layer and left: var(--pos) on the divider read the same variable, so the seam and the handle can never drift apart. Pointer capture, touch, and arrow-key stepping all come from the input. Two details make it line up. The thumb has to be 1px wide, because a range maps its value across the track minus the thumb, so a default 16px thumb leaves the divider short of the edges at 0 and 100. And step="0.1", because the default step of 1 quantises a 560px sweep into 5.6px jumps.

cssjavascriptinteractionimagesclip-pathslider

03 / 15

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

04 / 15

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()

05 / 15

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

06 / 15

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

07 / 15

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

08 / 15

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

09 / 15

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

10 / 15

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

11 / 15

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

12 / 15

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