The library

Techniques, not templates

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

1 / 2

Synced Scrubber with Preview

This demo illustrates a video scrubber with a draggable thumb and a floating preview thumbnail. All moving parts—the progress bar fill, the draggable thumb, and the preview bubble—are synchronized by a single CSS custom property, ensuring smooth and coordinated movement.

javascriptcss-variablesinteractionrange-sliderplayerdynamic-styles

2 / 2

Accessible Status Colors

This demo illustrates how to create accessible status indicators by toning down pure hues and combining color with clear text labels and icons. Colors are derived from HSL custom properties for backgrounds, borders, and text to ensure readability and semantic clarity.

accessibilitycolorui-designcss-variableshslstatus