The library

Techniques, not templates

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

01 / 10

Even Flex Lines with flex-wrap: balance

Greedy wrapping fills the first line and strands whatever is left, which is how a four-item nav ends up three across with one alone underneath. flex-wrap: balance asks the browser to spread the items evenly over the lines it needs instead — four items become two and two. Drag the panel's right edge to move the wrap point and watch the two lists disagree. Chrome 150 is the first to ship it, so the balanced list falls back to wrap elsewhere and says so.

csslayoutflexboxprogressive enhancementflex-wrap

02 / 10

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

03 / 10

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

04 / 10

Flexbox Expanding Gallery on Hover

A responsive gallery where hovering over a panel expands it, causing other panels to gracefully shrink. This effect is achieved purely with CSS flexbox and transitions, leveraging the `flex` property.

animationcsslayouthoverflexboxgallery

05 / 10

Chip / Tag Input Field

An interactive input field that converts typed entries into visible, removable 'chips' upon pressing Enter. Chips are styled as rounded pills and can be individually dismissed by clicking an 'x' button or by pressing Backspace when the input field is empty. Includes accessibility for screen readers.

accessibilityinputjavascriptflexboxchipstags

06 / 10

Flexbox Step Progress Bar with Animated Fill

A responsive step progress bar showing checkout progress. It features a dynamically filling line that animates between steps and highlights the current step with a subtle glow, while completed steps display a checkmark.

animationflexboxcss variablesstate managementprogress indicatorcheckout ui

07 / 10

Animated Toast Notifications

A refined toast notification system featuring CSS-driven slide-in and slide-out animations, neat vertical stacking using flexbox, and an auto-dismiss progress bar with different visual states for success, info, and error messages.

animationuxcssflexboxnotificationskeyframe

08 / 10

CSS Overlapping Avatar Stack

A group of circular avatars that overlap using negative margins, smoothly fanning out with a positive margin on hover. This effect is achieved with pure CSS, utilizing flexbox and transitions.

csslayouthoverflexboxtransitionavatars

09 / 10

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

10 / 10

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