# Characters Remaining
> Character counter with spring-based bounce animation and color-mapped feedback built with Svelte Motion for smooth, reactive UI updates.
**Source:** [https://motion.svelte.page/examples/characters-remaining](https://motion.svelte.page/examples/characters-remaining)
**Markdown mirror:** [https://motion.svelte.page/examples/characters-remaining.md](https://motion.svelte.page/examples/characters-remaining.md)
---
This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page.
## FIG-001: 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.
**Metadata:** tag: `TRANSFORM` | pattern: `mapped-feedback`
### Notes
- `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.
### Source
#### Default.svelte
Source file: [src/lib/examples/characters-remaining/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/characters-remaining/demos/Default.svelte)
```svelte