Fluid Scaling

Add fluid to any element with text=, density=, or gap= and the value scales continuously across all viewport widths using clamp(). No breakpoints. No jumps. Zero JS.

Fluid typography

Resize the browser window — the text scales smoothly between min and max sizes.

Fluid display

Fluid heading

Fluid subheading

Fluid body — scales from 0.875rem → 1rem across viewports.

Fluid caption text

<h1 text="display" fluid>Fluid display text</h1>
<h2 text="heading" fluid>Fluid heading</h2>
<p  text="body"    fluid>Fluid body text</p>

Fluid density

Padding scales proportionally with the viewport — no awkward breakpoint jumps.

Spacious — fluid padding

Scales from compact → spacious continuously

Default density — fluid

Compact — fluid

<div surface="glass" density="spacious" radius="xl" fluid>
  Spacious padding that scales with the viewport
</div>
<div surface="matte" density="default" radius="lg" fluid>
  Default density, fluid
</div>

Fluid gap

Card A

Card B

Card C

<div layout="grid" gap="lg" fluid style="--aura-grid-min:160px;">
  <div surface="matte" density="default" radius="lg">Card</div>
  <div surface="matte" density="default" radius="lg">Card</div>
  <div surface="matte" density="default" radius="lg">Card</div>
</div>

How it works

/* Without fluid — jumps at breakpoints */
[text="heading"] { font-size: 2rem; }
@media (max-width: 768px) { [text="heading"] { font-size: 1.5rem; } }

/* With fluid — continuous clamp() scaling */
[text="heading"][fluid] {
  font-size: clamp(1.35rem, 2.5vw + 0.6rem, 2rem);
  /* min ──────┘   fluid─────┘              └── max */
}