The library

Techniques, not templates

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

1 / 6

Inverting Headline: White Minus the Backdrop

One line, and the headline stops needing a colour. mix-blend-mode: difference subtracts the two layers channel by channel, so white text hands back the exact inverse of whatever is under it: black on a bright sheet, white on a dark hero, cyan over magenta, all of it per pixel and without a second copy of the text. Three things bound it. Mid grey is the blind spot, since 128 against 255 comes back as 127, the grey it was meant to beat. Only white is a true invert, because any other colour has channels it cannot fully subtract. And a blended element reads everything painted beneath it in its stacking context, so isolation: isolate on the scene is what stops the headline from subtracting the whole page.

csscontrasttypographytextcolorblend-modeno-jshero

2 / 6

Clamp a Paragraph to N Lines

Cutting a preview to a fixed number of lines used to mean measuring text and slicing strings. Three declarations do it instead: display: -webkit-box with a vertical box-orient lets -webkit-line-clamp cut at whatever line you name, and the browser adds the ellipsis. The line count here is a custom property, so the same rule serves every card.

csstypographytexttruncationline-clamp

3 / 6

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

4 / 6

Multi-Line Text Truncation with Ellipsis

Truncate multi-line text to a fixed number of lines using CSS `line-clamp`, automatically adding an ellipsis when the content overflows. The demo switches between short and long descriptions to illustrate the effect.

animationcsstexttruncationline-clampellipsis

5 / 6

CSS Text Wrap: Balance & Pretty

This UI trick uses the new `text-wrap` CSS property to intelligently balance headlines and prevent orphaned words in paragraphs. Applying `text-wrap: balance` makes multi-line headings visually symmetrical, while `text-wrap: pretty` prevents a single word from appearing alone on the last line of a paragraph, enhancing readability and design aesthetics with zero extra markup.

csslayouttypographytextui-uxreadability

6 / 6

Animated Flowing Gradient Text

A vibrant gradient continuously slides through text, creating an eye-catching, dynamic heading with a subtle glow, making the text feel alive and modern.

animationcsstypographytextgradienteffects