The library

Techniques, not templates

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

1 / 7

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

2 / 7

Seamless Marquee: Two Copies, Half a Slide

A marquee loops with no visible jump when the run is repeated twice and slid by exactly half the track: half the track is one whole copy, so at the end copy two stands where copy one started and the restart has nothing to show. Three details decide it. The travel has to be translateX(-50%), a percentage of the element being transformed, so it tracks the run's width on its own. The track needs width: max-content, or it wraps at the parent's width. And the spacing belongs to the items, not the track: a gap sits between the two copies as well as inside them, so a 34px track gap puts one copy 17px out of step, while padding-inline-end leaves the halves identical.

animationcssno-jsmarqueetransformkeyframesticker

3 / 7

Highlighted Pricing Card

A three-column pricing table where the middle, 'popular' plan stands out with a larger scale, a glowing gradient border, and an accent badge. Numeric figures are aligned using tabular numbers for a clean, consistent look.

csslayouttypographygradientcardpricingtransform

4 / 7

3D Flip Card with CSS

A responsive 3D card that flips on hover, revealing its back face with a smooth, spring-like animation, using pure CSS perspective and transform properties.

animationcsshovercard3dtransform

5 / 7

Performant CSS Animations: Transform vs. Left

This demo illustrates the performance difference between animating an element's 'left' property and its 'transform: translateX()' property. Animating 'left' forces the browser to re-calculate layout on every frame, leading to a 'janky' or stuttering effect. In contrast, 'transform: translateX()' allows the browser to offload the animation directly to the GPU, skipping layout and paint, resulting in a smooth 60fps animation.

animationcsslayoutperformancetransformgpu

6 / 7

Tag Chip Pop Animation

Demonstrates a smooth entrance and exit animation for tag chips using CSS `keyframes` and `transform: scale()`. Chips dynamically appear and disappear, creating a subtle popping effect.

animationflexboxtransformscalekeyframeschips

7 / 7

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