The library

Techniques, not templates

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

01 / 36

3D Carousel: Rotate, Then Push

One rule places every card. rotateY() turns the card to its seat, which re-aims the card's own z axis outwards, and translateZ() then walks it along that new axis to the rim, so only --i changes. Swap the two and every card is pushed at the camera before it turns: the rotation swings one stack around the parent and you get a fan, not a ring. The radius is derived, not guessed. The cards are the sides of a regular polygon, each side one card plus one gap long, so r = (card + gap) / 2tan(180deg / n): pick the gap and the radius follows, which is why the count buttons set --n and nothing else. The spin is one keyframe on a registered --angle, so a drag can take the wheel and hand it straight back.

animationcssuicarouseljavascript3dinteractiontransformperspective

02 / 36

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

03 / 36

Before/After Slider Driven by a Range Input

A comparison slider where the whole drag is a native <input type="range">, stretched over the image at opacity 0. One line of JavaScript copies its value into --pos; clip-path: inset(0 0 0 var(--pos)) on the top layer and left: var(--pos) on the divider read the same variable, so the seam and the handle can never drift apart. Pointer capture, touch, and arrow-key stepping all come from the input. Two details make it line up. The thumb has to be 1px wide, because a range maps its value across the track minus the thumb, so a default 16px thumb leaves the divider short of the edges at 0 and 100. And step="0.1", because the default step of 1 quantises a 560px sweep into 5.6px jumps.

cssjavascriptinteractionimagesclip-pathslider

04 / 36

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

05 / 36

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

06 / 36

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

07 / 36

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

08 / 36

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

09 / 36

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

10 / 36

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

11 / 36

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

12 / 36

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