Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.
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.
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.
A search icon that expands into a full input field using only CSS `:focus-within` and `width` transitions, saving space until activated.
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.
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.
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.
Custom styled radio buttons created by resetting native appearance and animating border thickness on the `:checked` state with pure CSS.
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.
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.
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.
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.
A modal dialog with a backdrop that animates between a confirmation state (delete project) and a success state (project deleted) with distinct icon and content transitions. The modal itself subtly changes size during the state transition.