Characters Remaining | Svelte Motion

FIG-001/ TRANSFORM

characters remaining.

Type into the input. As you approach the 12-character limit the counter darkens through pink and the digit bounces — a transform value-mapper drives the colour, an imperative animate() spring keyed by the count drives the bounce.

transform([from, to], [a, b]) builds a function that maps a numeric input to an interpolated output. The colour mapper here goes from pink at 2 left to muted grey at 6+ left — a smooth read of urgency without conditional CSS.
The spring fires from a $effect keyed by charactersRemaining. velocity scales with the count, so the bounce gets more energetic as the limit approaches and goes still when there's room to spare.
The counter's color is a regular reactive style; only the scale bounce is imperative because we want the spring to fire on value change, not just animate to a target.

↩ all examples

pattern · mapped-feedback mode · live running source

category · transform

sheet · sheet 01 / 01

⟳ to re-run