01 — Live

A hero that follows a number.

Bind the look to anything that counts — sign-ups today, stars, a price. As the number climbs, the surface moves toward another colourway or simply gets louder, and the moment it passes a milestone it erupts. Nobody has to read the number to notice it changed.

forging

35 on a scale of 0–100 · milestone 50, 90

Where the number comes from

Value35Drag past 50 and 90 — those are the milestones.WordLook at the bottomLook at the top

React

<LiquidHero
  object={{ type: "text", value: "LIVE" }}
  preset="mercury-3"
  data={{ value: signupsToday, min: 0, max: 100, milestones: [50, 90], to: "magma-4" }}
/>

Webflow, Framer or any HTML

<script src="https://cdn.jsdelivr.net/npm/liquidforge@0.1/dist/element.global.js" defer></script>
<liquid-forge
  text="LIVE"
  preset="mercury-3"
  value="35"
  value-min="0"
  value-max="100"
  milestones="50,90"
  value-to="magma-4"
  style="display:block;height:480px"
></liquid-forge>