cq-lerp
Linear interpolation driven by a container's width, in any CSS unit.
Built on progress() where the browser has it, with a
clamp() fallback where it does not.
No JavaScript, no keyframes, no media queries. Every dashed box below is a
container-type: inline-size element with resize: horizontal.
Grab its bottom right corner and drag, or just resize the window. Both work.
The only reason any of this works with degrees, seconds and percentages is that the progress is computed first as a plain number from 0 to 1, and multiplied after.
1. Seven families of units
rem, width shrinks while height growsdeg in rotate and skew at onceem + ch + a plain number for font-weightdeg inside filter + % in radiuss in transition-duration, 0.06s to 1.4s% in clip-path + a plain number in scaledrag ↑
2. Linear against smoothstep
Same bounds, same property. The top bar runs on var(--cq-t), the bottom one
on var(--cq-te). They meet at both ends and at the midpoint, and separate
at the quarters.
drag ↑
3. Descending range, before and after
Both bars ask for the same thing: 26rem when narrow, 2rem when wide. The top one uses the
classic clamp(26rem, ..., 2rem) and sits at 416px forever, because CSS returns
MIN whenever MIN is greater than MAX. The bottom one uses fluid(26rem, 2rem).
drag ↑