The library

Techniques, not templates

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

01 / 33

Two-Handle Price Filter From Real Inputs

Every shop has a two-handle price filter and no HTML element does it, so people reach for a slider library or fake the whole thing with divs — and throw away keyboard support on the way. Stack two real range inputs on one track instead. pointer-events: none lets a click fall straight through the invisible tracks, pointer-events: auto on the thumbs keeps each one grabbable, and that pair is the entire trick: arrow keys, Home/End, Tab focus and aria all still work. One fill div reads both values, each input clamps against the other so the handles cannot cross, and the higher one sits on top or its thumb goes unreachable at the far end.

cssaccessibilityui/uxformsjavascriptrange

02 / 33

Drag-to-Reorder That Opens a Gap

What sells a sortable list is not the row you are holding — it is what the other rows do. Swap them the instant you cross a boundary and the list flickers; instead, every row past the drop target shifts by exactly one row height, and the gap that opens up is the drop indicator. Two details carry it: transform rather than top or margin, so the shift stays composited at fifty rows, and a short transition, because anything over about 0.2s lags behind your finger and reads worse than no animation at all.

animationcssui/uxjavascriptinteractiondrag and drop

03 / 33

Password Strength Meter with Live Feedback

A password strength meter that dynamically updates its fill width and color based on real-time password criteria checks, providing immediate visual feedback as the user types.

formprogress barjavascriptcss variablespasswordstrength meter

04 / 33

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

05 / 33

Pull-to-refresh with resistance

This UI trick demonstrates a realistic pull-to-refresh gesture. Dragging down on the content at the top of a scrollable area reveals a spinner, with a 'rubber band' like resistance as you pull further. Releasing above a threshold snaps the content back, while releasing below it triggers a refresh animation before snapping back.

animationcssjavascriptmobilepull-to-refreshgesture

06 / 33

CSS Color Picker Gradients

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.

csscolorgradientsuijavascriptinteractivity

07 / 33

Interactive Drag-and-Drop Zone

A responsive drag-and-drop file upload zone that visibly reacts to drag-over states, displays upload progress, and confirms successful completion, all driven by CSS transitions and JavaScript event handling.

transitionsjavascriptprogress-barcss-statesfile-uploaddrag-and-drop

08 / 33

Ripple Grid Animation

A grid of dots displays a mesmerizing ripple effect, achieved by a single CSS keyframe animation applied to each dot, with the animation-delay precisely controlled by each dot's distance from the grid's center.

animationcssgridjavascripteffectdelay

09 / 33

CSS Flexbox Bar Chart with Staggered Animation

Create an animated bar chart using CSS Flexbox for layout, percentage heights for bars, and staggered CSS transitions for a dynamic 'loading' effect without any chart library. A JavaScript counter animates the total revenue stat.

animationcsstransitionsjavascriptflexboxdata visualization

10 / 33

Before/After Image Slider with Clip-Path

This component demonstrates a draggable image comparison slider built by layering two images and dynamically adjusting the `clip-path` property of the top layer using a CSS custom property controlled by JavaScript.

cssjavascriptclip-pathsliderdragimage comparison

11 / 33

Material Ripple from Tap

Recreates the Material Design ripple effect on a button. The ripple originates precisely from the user's click point and expands outwards while fading, clipped neatly by the button's boundaries.

animationcssjavascriptbuttonclickinteractionripple

12 / 33

Magnetic Parallax Button

A button that subtly follows the cursor with a magnetic pull, featuring a parallax effect on its inner label for added depth. It smoothly springs back to its original position when the cursor leaves.

animationhoverjavascriptbuttonparallaxmagnetic