The library

Techniques, not templates

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

1 / 5

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
2 / 5

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
3 / 5

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
4 / 5

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
5 / 5

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