The library

Techniques, not templates

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

1 / 9

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

2 / 9

Pulsing Status Dot: The Ring Is a Box Shadow

A pulsing status dot is usually three elements: a wrapper, a ring, and the dot. It needs one. box-shadow paints outside the border box and takes no part in layout, so the halo is a second shape the element already owns: grow the spread from 0 to 14px while the alpha runs out and the ring swells past the dot, moving nothing around it. One span, two keyframes. The shadow reads color-mix(in srgb, var(--dot) 70%, transparent), so green, red, amber and blue all run the same pulse, and it inherits border-radius, so the circle and the rounded square differ by that one property. cubic-bezier(0, 0, .35, 1) throws the spread out at once and then crawls, which is what a ripple looks like; linear reads as a blinking outline.

animationcssbox-shadowno-jskeyframesstatuspulse

3 / 9

Sprite Sheet Animation with steps()

A sprite sheet is one image and a keyframe that slides it: background-position travels the sheet's full width while steps(10) freezes it on each frame for 140ms, so the browser draws ten discrete poses instead of tweening between them. The strip above is the same image at 3x, running the same duration and step count, so it always sits over the frame being drawn below. Three things decide whether it lines up. The travel is the whole sheet width, not one frame short: steps() defaults to jump-end and never lands on the end value. background-size is in pixels, because a percentage there resolves against the element and the frames would drift. And image-rendering: pixelated, or 18px art smooths into mush.

animationcsskeyframespixel-artspritegame-ui

4 / 9

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

5 / 9

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

6 / 9

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

7 / 9

Like Button Pop Animation

A heart icon button that, when clicked, changes color and performs a satisfying 'pop' animation using CSS keyframes and a hidden checkbox for state management, requiring no JavaScript.

animationtogglecssbuttonsclickkeyframes

8 / 9

Indeterminate CSS Loading Bar

A pure CSS loading bar that uses a ::before pseudo-element and keyframe animation to create an infinitely sliding, indeterminate progress effect, without any JavaScript.

animationcssprogresskeyframespseudo-elementsloader

9 / 9

Pure CSS Typing Dots Animation

Recreate the classic 'typing…' indicator with three bouncing dots using only CSS. It features a staggered animation delay for a smooth, sequential bounce.

animationcssflexboxstaggeredkeyframeschat-ui