ns-ui
A rate-limited button that heat-soaks: each press deposits heat into a visible bottom-up fill, dilates its letter-spacing, swells its surface and brightens its border, growing a heat-haze shimmer as it nears the limit and decaying exponentially (fill draining, haze fading) when idle — hammered past its duty cycle it soaks into a distinct hazard-hatched dead state, going dead on a flat 1px dip until it visibly cools back below the re-arm mark.
Use when any rate-limited or expensive action a user might spam — resend email, re-run job, metered refresh — where the limit should be legible before it's hit, and the thing gating it is the user's own input rate rather than a fixed timer. Its whole mechanism is a continuous duty-cycle scalar with hysteresis (soaks at h>=1.0, re-arms only once genuinely cooled at h<=0.05, so a click right after re-arming can't instantly punch it back into soak); pick toast-undo-fuse instead for a single timed toast counting down to one fixed future event with no notion of repeated user input at all.
Install
npx shadcn add https://design.helpmarq.comns-ui / button-cooldown-heat
Press repeatedly — heat fills the button from the bottom, its letters spread, its border brightens and a haze shimmers across the surface as it nears the limit. Push it past its duty cycle and it soaks: a hazard hatch pulses, presses go dead, and the fill visibly drains back down as it cools.
ready
sent 0 times
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Visible label — also the button's accessible name. |
| onPress? | () => void | — | Fires on every press that isn't soaked — the actual rate-limited action. |
| className? | string | — | — |