Liquid Gauge

Accessibility

• The gauge is a meter with the percent and free space as its text.
• Changes are announced politely.
• Almost full has a Badge and a label, never colour alone.
• The readout swaps to the inverse ink where the liquid covers it, so it reads at any level.

Motion

• A new value springs the level over 1200 ms.
• The wave grows from 4 to 9 px and settles back while it tilts.
• Digits count to the new percent.
• On Mobile, the wave follows device tilt where the browser allows it. With a mouse, the liquid tips up to 6 degrees toward the pointer and settles when it leaves.
• A press splashes it: the wave kicks to 1.2 times its slosh height and sways back on a spring.
• At rest nothing loops.
• With reduced motion, the level jumps and the wave stays still.

Responsive behavior

• 300 px on Web and 358 px on Mobile.
• The gauge stays 168 px.
• On Mobile, the action takes the full width and grows one size.

Performance

• The level, wave and tilt are motion values, so a change does not re-render the card.
• Running animations stop on unmount, and the tilt listener exists only on touch screens.
• The percent counts by writing text directly.

• Import LiquidGauge from @/components/fetaui/liquid-gauge and pass used and total in the same unit.
• Changing used sloshes on its own. slosh only holds the tall pose, for previews.
• At warnAt, default 0.9, the Badge turns Almost full and the action becomes urgentActionLabel on a Primary Button.
• Device tilt is read only where the browser allows it without asking. Wire onAction yourself. Composes Card, Badge and Button.