Combo Multiplier
The multiplier climbs while answers keep landing, and the charge bar drains toward the break.
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, useMemo, useRef, useState } from "react";
import {
animate,
AnimatePresence,
motion,
useMotionValue,
useReducedMotion,
} from "motion/react";About this pattern
A run of consecutive successes, with the cost of stopping made visible. Each hit rolls the multiplier up a step and refills the charge bar; between hits the bar drains in real time on a strictly linear curve, because a countdown that eases misreports how much time is left. When the run ends the multiplier drops back with the digit arriving from above rather than below, so the direction of the roll carries the direction of the news. The figure lives in a fixed slot and only ever translates and crossfades — a multiplier that pops on every hit is the single cheapest gesture available in this category, and it is the one thing this pattern is careful not to do.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Activity summary
Practice games showing a rising multiplier with a visible decay window.
Related patterns
- Streak AdvanceThe connector reaches today's cell, the cell fills, and the streak count rolls over.
- Habit Calendar FillToday's square fills in the month grid and the run it belongs to draws itself underneath.
- Badge UnlockAn earned badge lands and one band of light crosses its face — a single pass, then still.