The library

Techniques, not templates

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

01 / 11

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

Squircles in CSS: corner-shape Cuts the Corner

Chromium 139 and up only. Safari and Firefox drop the declaration and keep the border-radius, which is the rounded box you already ship, so the fallback costs nothing. A round corner is a quarter circle: it meets the straight edge at an angle. corner-shape says which curve cuts the corner instead, and squircle keeps curving into the edge, the shape phone home screens have used for a decade. It needs a border-radius to work on, since that is what says how far the corner is cut. Every named value is one point on a single curve: bevel is superellipse(0), round is superellipse(1), squircle is superellipse(2), and negatives scoop the corner inwards. notch and square sit at the two infinities.

cssborder-radiusuino-jscornersshapesiconscorner-shape

03 / 11

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

04 / 11

CSS Grid FR Accordion

Animate accordion panels smoothly to any content height using CSS Grid's `fr` unit. This technique avoids fixed `max-height` values or JavaScript height measurements, providing a fluid and adaptable expansion.

animationcssgriduiaccordioninteraction

05 / 11

Squircle Corner Shape Comparison

Compares standard CSS `border-radius` with the smoother 'squircle' (superellipse) corner shape, often seen in Apple's UI. This effect utilizes the experimental `corner-shape` CSS property for a more continuous curve.

cssuicornerssuperellipseshapes

06 / 11

Pure CSS Toast Notification

A self-dismissing toast notification that slides in, remains visible for a set duration, and then slides out, all powered purely by CSS animations without JavaScript.

animationcssuikeyframestoastnotification

07 / 11

Animated Toast Notification

A non-blocking, animated toast notification that slides in from the bottom right, provides success feedback, and auto-dismisses after a short period, with an option to close manually.

animationuijavascriptfeedbacktoastnotification

08 / 11

Autocomplete Combobox with Filtering & Keyboard Navigation

An interactive combobox that filters suggestions in real-time as you type, highlights matched text within the results, and allows selection via arrow keys and Enter, or a direct mouse click.

inputuijavascriptkeyboard navigationfilteringautocompletecombobox

09 / 11

Animated Delete Confirmation Modal

A modal dialog with a backdrop that animates between a confirmation state (delete project) and a success state (project deleted) with distinct icon and content transitions. The modal itself subtly changes size during the state transition.

animationuitransitiondialogmodalconfirmation

10 / 11

3D App Unfold Transition

An application UI that appears to unfold like paper, expanding its width and revealing content with a smooth 3D rotation and expansion effect.

animationlayoutui3dtransitiontransform

11 / 11

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