Every trick recreated from the source video as a live, self-contained demo. Search, filter, open, steal.
This demo illustrates how a color picker's saturation/brightness square and hue strip can be constructed using layered CSS gradients. Drag the circular selectors to change the hue, saturation, and brightness, seeing the resulting color instantly.
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.
Compares standard CSS `border-radius` with the smoother 'squircle' (superellipse) corner shape, often seen in Apple's UI. This effect utilizes the experimental `corner-shape` CSS property for a more continuous curve.
A self-dismissing toast notification that slides in, remains visible for a set duration, and then slides out, all powered purely by CSS animations without JavaScript.
A non-blocking, animated toast notification that slides in from the bottom right, provides success feedback, and auto-dismisses after a short period, with an option to close manually.
An interactive combobox that filters suggestions in real-time as you type, highlights matched text within the results, and allows selection via arrow keys and Enter, or a direct mouse click.
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.
An application UI that appears to unfold like paper, expanding its width and revealing content with a smooth 3D rotation and expansion effect.
Recreates a "blueprint" style effect where UI components, their dimensions, and labels are animated as if being drawn by a CAD plotter, using SVG path animations and timed content reveals.