clamp() in Action
The heading and text below use clamp() for fluid font
sizing. Drag the bottom-right corner of the box to resize it and watch
the text scale smoothly:
Drag the handle to resize →
Harbor Study No. 3
This series explores the tension between natural forms and digital artifacts. Each piece began as a plein air sketch before being reinterpreted over several weeks.
The font size smoothly interpolates between the minimum (1.25rem) and maximum (3rem) as the container changes width. No breakpoints, no jumps.
This demo uses cqw (container query width) units so the
text responds to the resizable box. In real projects, you'll choose
between vw (viewport-relative) and
cqw (container-relative) depending on whether the text
should scale with the browser window or its parent component.