Knockout Type Plate
A headline that inverts the photograph beneath it, with a scrim that keeps it legible.
DOM + CSS0 deps1 file · 4 KB TSXreduced-motion aware
Props
"use client";
const GRAIN =
'url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter%20id=%27n%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.86%27%20numOctaves=%273%27%20stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect%20width=%27100%25%27%20height=%27100%25%27%20filter=%27url(%23n)%27/%3E%3C/svg%3E")';
const KEYFRAMES =
"@keyframes knockout-drift{0%{transform:translate3d(-2.5%,0,0) scale(1.14)}100%{transform:translate3d(2.5%,0,0) scale(1.14)}}" +
"@media (prefers-reduced-motion: reduce){[data-knockout-plate]{animation:none!important}}";
export function KnockoutTypePlate({
src = "https://images.unsplash.com/photo-1668952135120-7d997b1b3778?auto=format&fit=crop&w=1200&q=70",
headline = "HARD / LIGHT",
kicker = "Issue 04",
drift = 18,
invert = true,
scrim = 0.45,
}: {
src?: string;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this text effect
Knockout type — a headline that reverses out of whatever sits behind it — is a print idea that the web can do exactly, and almost nobody does, because the CSS that achieves it has two traps. The mechanism is a difference blend with the text in pure white: difference subtracts channel by channel, so white minus the backdrop is a true inversion, and the headline reads light over the dark areas of a photograph and dark over the light ones with no plate behind the letters. The white is not a taste decision. Any other colour produces a channel-wise absolute difference, which is a hue shift rather than a knockout. The first trap is isolation: a blend mode composites against everything below it in the stacking context, so without isolate on the wrapper the type inverts the page behind the plate as well as the image inside it. The second is contrast, and it is the one that ships broken. Mid grey inverted is still mid grey, so over a photograph nobody checked — a client upload, a CMS field — the headline can land genuinely invisible. The directional scrim is what gives the inversion somewhere to go, which is what makes the effect safe on imagery it has never seen. Blended text is also composited in its own layer and so antialiases in greyscale rather than subpixel, which reads thinner; the weight and tracking here are set against the blended result.
Curator’s note
Turn the difference blend off and the plate is an ordinary white headline on a photo. Turn it on and the type belongs to the image. The scrim is what stops that being a gamble.
