The library

Techniques, not templates

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

01 / 14

Odometer Price Roll

No digit is ever rewritten. Each column is a strip of 0 to 9 behind a window one line tall, and translate: 0 calc(var(--d) * -1lh) slides the strip until digit --d is the one showing. 1lh is the whole trick: the window and the step are both read off the same line box, so the strip stays in register at any font size without one pixel value anywhere. Changing the price is then changing two numbers, and :has lets the checkbox do it from inside the card, so .card:has(#yearly:checked) rewrites --tens and --ones and the wheels follow. A spring ease overshoots by a hair so each wheel settles instead of stopping dead, and the ones column starts a beat after the tens so the count cascades.

animationcssvariablestransition:hasodometer

02 / 14

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

03 / 14

Bouncy Like Button with Particle Burst

This interaction demonstrates a like button that, when tapped, springs and fills with color, while simultaneously emitting a burst of small heart particles that fly outward and fade away. It combines CSS transitions with custom cubic-bezier easing and CSS keyframe animations for a rewarding micro-interaction.

animationcssbuttonstransitioninteractivityparticles

04 / 14

Expanding Search Field with Focus-Within

A search icon that expands into a full input field using only CSS `:focus-within` and `width` transitions, saving space until activated.

animationcssforminputtransitionfocus-within

05 / 14

Pure CSS Floating Label

An input field with a label that initially acts as the placeholder. When the field is focused or text is entered, the label smoothly floats up and shrinks, providing persistent context without JavaScript.

animationuxcssaccessibilityformstransition

06 / 14

Native-Feeling Modal Dialog with Backdrop Blur and Scale-in

This UI trick demonstrates how to create a modal dialog that feels native by combining a dimmed and blurred backdrop with a subtle scale-in and fade-in animation, making the dialog appear with depth and focus.

animationuxcsstransitiondialogbackdrop-filtermodal

07 / 14

Animate height: auto with interpolate-size

Smoothly animate elements between height: 0 and height: auto (or other intrinsic size keywords) using the new CSS `interpolate-size` property, eliminating the need for JavaScript or `max-height` hacks.

animationcssaccordiontransitionkeywords

08 / 14

CSS Custom Radio Buttons

Custom styled radio buttons created by resetting native appearance and animating border thickness on the `:checked` state with pure CSS.

animationcssformstransitioninputsradio buttons

09 / 14

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

10 / 14

Blur-up Image Loading

Improve perceived load times by displaying a blurred, low-resolution image first, then transitioning smoothly to the sharp, high-resolution version. This keeps content present on screen, preventing a 'broken' blank state.

animationuxtransitionblurperceived performanceimage loading

11 / 14

CSS Copy Button State

A button that visually transforms from 'Copy' to 'Copied!' upon click, showcasing a change in background, icon, and text purely via CSS class toggling, then resets after a short delay.

cssjavascriptbuttontransitionpseudo-elementsstate

12 / 14

CSS-Only Tooltip with Data Attribute

Create a tooltip using only CSS, leveraging the `::after` pseudo-element and `attr(data-tip)` to display content on hover, with a smooth fade-in transition.

csstooltiphovertransitionpseudo-elementdata-attributes