Bonus

Fluid type scale calculator

Generate responsive clamp values with a live hierarchy

Live preview

The prompt

Create a fluid typography scale calculator with Tailwind CSS. Include minimum and maximum viewport widths, base font sizes, and a modular ratio selector. Generate four responsive type steps, display each computed CSS clamp value, and show a live editorial preview. Add JavaScript that validates the ranges, calculates linear interpolation for clamp, updates the preview through CSS custom properties, and copies any generated declaration.

Create a fluid typography scale calculator with Tailwind CSS. Include minimum and maximum viewport widths, base font sizes, and a modular ratio selector. Generate four responsive type steps, display each computed CSS clamp value, and show a live editorial preview. Add JavaScript that validates the ranges, calculates linear interpolation for clamp, updates the preview through CSS custom properties, and copies any generated declaration.

<div class="mx-auto max-w-4xl p-6"><section class="grid overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-sm lg:grid-cols-[0.8fr_1.2fr]"><div class="border-b p-5 lg:border-b-0 lg:border-r"><h2 class="text-lg font-semibold text-neutral-900">Fluid type scale</h2><p class="mt-1 text-sm text-neutral-500">Generate a hierarchy that grows smoothly with the viewport.</p><div class="mt-6 grid grid-cols-2 gap-3"><label class="text-xs font-medium text-neutral-600">Min viewport<input id="typeMinView" type="number" value="320" min="240" class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5 text-sm" /></label><label class="text-xs font-medium text-neutral-600">Max viewport<input id="typeMaxView" type="number" value="1440" min="480" class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5 text-sm" /></label><label class="text-xs font-medium text-neutral-600">Min base<input id="typeMinBase" type="number" value="16" min="10" class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5 text-sm" /></label><label class="text-xs font-medium text-neutral-600">Max base<input id="typeMaxBase" type="number" value="19" min="10" class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5 text-sm" /></label></div><label class="mt-4 block text-xs font-medium text-neutral-600">Scale ratio<select id="typeRatio" class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3 py-2.5 text-sm"><option value="1.2">Minor third · 1.200</option><option value="1.25" selected>Major third · 1.250</option><option value="1.333">Perfect fourth · 1.333</option></select></label><p id="typeError" class="mt-3 hidden text-xs text-red-600"></p><div id="typeDeclarations" class="mt-5 space-y-2"></div></div><div id="typePreview" class="flex min-h-[520px] flex-col justify-between bg-[#f2efe7] p-6 md:p-10"><div><p class="font-mono text-xs uppercase tracking-[0.2em] text-neutral-500">Field Notes · 026</p><h1 data-step="3" class="mt-8 max-w-xl font-serif leading-[0.95] tracking-tight text-neutral-950">A quieter way to build ambitious things.</h1><p data-step="1" class="mt-6 max-w-lg leading-7 text-neutral-600">Good systems make room for judgment. They provide structure without turning every decision into a form.</p></div><div class="flex items-end justify-between border-t border-neutral-300 pt-5"><p data-step="0" class="text-neutral-500">September 2026</p><p data-step="2" class="font-serif">Read the essay →</p></div></div></section></div>

The prompt

More bonus prompts