The library

Techniques, not templates

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

01 / 85

Rotating Glow Border with @property

A conic gradient can start at any angle, and until that angle is a registered custom property the browser refuses to interpolate it — so the border jumps instead of sweeping. Declare it with @property and one spinning gradient serves a card, an avatar ring and a button, each changing only its palette, speed and direction. The halo is the same gradient again, blurred behind the edge. Worth knowing: inherits is a required descriptor, not an optional one. Leave it out and the whole rule is invalid, --a never registers, and every gradient silently computes to none.

animationcssui/uxgradientconic-gradient@property

02 / 85

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

Pure CSS Typewriter Headline

A headline that types itself out with no JavaScript at all. The trick is animating width from 0 to the text's own character count in ch units, with white-space: nowrap and overflow: hidden clipping the rest, and a steps() timing function landing the reveal one character at a time. A blinking border-right doubles as the caret.

animationcsstextkeyframestypewritersteps

04 / 85

Smooth Collapsing Sidebar with Flexbox Fixes

This demo illustrates how to create a collapsing sidebar that transitions smoothly, preventing text labels from wrapping and icons from squashing during the animation. It uses `white-space: nowrap` for labels and `flex-shrink: 0` for icons, combined with width and opacity transitions.

animationcsslayoutflexboxtransitionsidebardashboard

05 / 85

Swipeable Card Stack with Depth Effect

Recreates a satisfying swipeable card stack interaction where the top card is flung away, revealing the next card which smoothly rises into position with a depth effect. Utilizes CSS transforms for scaling, translation, and rotation, managed by JavaScript for interaction.

animationui/uxinteractiontransformscss variablescard stack

06 / 85

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

07 / 85

Bouncy Like Button with Particle Burst

This interaction demonstrates a like button that, when tapped, springs and fills with color, while simultaneously emitting a burst of small heart particles that fly outward and fade away. It combines CSS transitions with custom cubic-bezier easing and CSS keyframe animations for a rewarding micro-interaction.

animationcssbuttonstransitioninteractivityparticles

08 / 85

Sun-to-Moon Dark Mode Toggle

A charming dark mode toggle switch where a radiant sun retracts its rays, shifts color, and a 'carving' circle slides across to elegantly transform it into a crescent moon, powered purely by CSS transitions.

animationtoggleswitchcssdark modetransitions

09 / 85

Button Loading & Success State Transitions

This button animates through three states: an initial state with text, a loading state where it shrinks into a spinner, and a success state where it turns green and reveals a self-drawing checkmark. This provides instant and trustworthy feedback to the user.

animationcsstransitionsformsbuttonfeedback

10 / 85

Expanding Search Field with Focus-Within

A search icon that expands into a full input field using only CSS `:focus-within` and `width` transitions, saving space until activated.

animationcssforminputtransitionfocus-within

11 / 85

OTP Input with Individual Digit Boxes

A sleek verification code input where each digit resides in its own box. Digits pop in with animation, the active box glows with a blinking caret, and the entire set changes to a success state when complete.

animationcssinputfocusotpverification

12 / 85

Pure CSS Floating Label

An input field with a label that initially acts as the placeholder. When the field is focused or text is entered, the label smoothly floats up and shrinks, providing persistent context without JavaScript.

animationuxcssaccessibilityformstransition