The library

Techniques, not templates

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

1 / 6

Grain on a Gradient: Two Surfaces

Two surfaces: a gradient, and a sheet of noise lying on it. The stack opens so you can see the sheet is nothing clever, only grey static, and compare lays the same gradient down twice with grain on one of them, which settles the argument faster than any amount of describing it. mix-blend-mode: overlay is what turns that static into tooth. It moves the gradient's lightness and leaves the hue alone, so the color survives and the plastic smoothness does not. The noise is an SVG of feTurbulence carried as a background image rather than a CSS filter, since the filter runs inside the SVG and CSS only loads the picture it makes. Each grain button is a different filter, not the same one turned up.

cssgradientblend-modenoisesvgtexture

2 / 6

Refractive Glass: Noise Bends the Backdrop

Chrome is the only engine that bends a real backdrop. Safari and Firefox run an SVG filter on an element and never on a backdrop, so there it is a copy of the scene's own gradient that bends, and over arbitrary content they get the frost and nothing else. Frosted glass blurs what is behind it; real glass moves it. feTurbulence paints a cloud, feDisplacementMap reads red as how far each backdrop pixel travels along x and green as y, and it runs before the blur averages anything. The lens and the frost are siblings, never nested: an element with a backdrop-filter starts its own backdrop root, so a lens inside the frosted box would find nothing left to bend. The filter travels as a data URI because a fragment reference cannot be resolved from a sandboxed frame.

cssjavascriptnoiseglassmorphismblurbackdrop-filterfiltersvg

3 / 6

Animated SVG Checkbox

A custom-styled checkbox featuring an SVG checkmark that draws itself with a smooth stroke animation. It supports unchecked, checked, and indeterminate states while maintaining native accessibility.

animationcssaccessibilityformscheckboxsvg

4 / 6

SVG Circular Progress Bar

An SVG-based circular progress bar that animates from 0% to 100% using the `stroke-dashoffset` property. It features a round line cap and starts filling from the 12 o'clock position, with a numerical percentage updating in sync.

animationcssprogressjavascriptsvgloading

5 / 6

Delightful Completion Checkmark

An animated success indicator featuring a glowing circle that draws itself, followed by a dynamically drawing checkmark, and a 'Done!' message, creating a satisfying visual reward for a completed action.

animationcssfeedbacksvgmicrointeraction

6 / 6

Blueprint UI Drawing Animation

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.

animationcssuisvgfrontenddrawingblueprint