Character Count Limit
A small ring closes as the field fills, shows what is left once the cap is in sight, and tints once when the text runs past it.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Character Count Limit
*
* A small ring closes as the field fills. It stays quiet until the limit
* is in sight, shows the number remaining once it is, and tints — with aAbout this pattern
A counter that shouts from the first keystroke gets ignored by the tenth, so this one earns attention gradually: the ring closes quietly while there is room, the number appears only once the cap is in sight, and the whole indicator tints amber and then red as the text crosses it. Going over plays exactly one pulse — a repeating throb would sit in the corner of the eye for as long as the sentence is too long. The number itself is text and behaves like text: constant size, tabular figures, no spring, because a count that jitters while someone is typing is the one thing a count cannot be. Nothing is truncated; the field reports the overrun and lets the writer fix it.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Social feed
A ring that closes as the post grows and turns red past the cap.
Related patterns
- Textarea AutogrowThe field takes one line-height more as the text wraps, easing into it rather than snapping.
- Conditional Section RevealPicking an option unfolds the extra fields it requires, the section easing its height open.
- Form Reset ClearA wash crosses each row in turn and the value is dropped while the row is covered.