UIПочатковий

Score Ticker

Прокрутка рахунку до нового значення замість стрибка — здобуте відчувається заробленим.

uirewardjuicefeedback

Приклади

Записано з інтерактивного демо нижче на цій сторінці.

Огляд

Тікер рахунку анімує показане число до справжнього значення за короткий час — очки на очах вливаються, а не телепортуються. Це прийом аркад і пінболів, який дожив майже до кожної гри з рахунком.

Це працює, бо число, що лічить, — це рух, а рух притягує око; стрибкове оновлення — один кадр, якого ніхто не бачить. Спостерігати, як цифри повзуть угору, — це ще й розтягнута мить винагороди: той самий трюк, на який спираються слот-машини.

Прокрутка — суто презентаційна: справжній рахунок під нею оновлюється миттєво, а тікер його наздоганяє, плавно підхоплюючи навіть очки, що прилетіли посеред прокрутки.

Інтерактивне демо

SCORE0

Очків за раз400

Тривалість лічби600ms

Де застосовується

Підбиття очок наприкінці рівняПідрахунок монет після забігуЗаробіток idle-гри після поверненняПоказ нагород у стилі казино

Найкращі практики

Варто

✓Тримайте справжній рахунок головним і миттєвим — крутиться лише показане число.
✓Гальмуйте наприкінці (ease-out: швидкий старт, м'яка посадка), щоб фінальне значення осіло читабельно.
✓Масштабуйте тривалість лічби під розмір приросту — 10 очок не мають лічитись так само довго, як 10 000.

Не варто

✕Не блокуйте прогрес (переходи, інпут), поки тікер докручує, — дайте йому наздогнати або пропустіть за вимогою.
✕Не крутіть настільки повільно, що кілька приростів стають у чергу й екран відстає від гри на секунди.
✕Не озвучуйте кожну зміну цифри на високій швидкості — обмежуйте частоту чи змінюйте тон, інакше вийде дзижчання.

Поширені помилки

⚠Анімувати від старої цілі замість поточного показаного значення при перезапуску — видимий стрибок.
⚠Шрифт без табличних (моноширинних) цифр — рядок їздить туди-сюди, коли цифри змінюють ширину.
⚠Накопичене округлення float між оновленнями, через яке тікер сідає на 9 999 замість 10 000, — завжди приземляйтесь точно в ціль.

Реалізація

Встав це у свого ШІ-асистента (Cursor, Copilot, Claude), щоб додати ефект у проєкт.

Промт

Додай у мій проєкт ефект "Score Ticker": Прокрутка рахунку до нового значення замість стрибка — здобуте відчувається заробленим.

Як це працює: Тікер рахунку анімує показане число до справжнього значення за короткий час — очки на очах вливаються, а не телепортуються. Це прийом аркад і пінболів, який дожив майже до кожної гри з рахунком.

Рекомендації:
- Тримайте справжній рахунок головним і миттєвим — крутиться лише показане число.
- Гальмуйте наприкінці (ease-out: швидкий старт, м'яка посадка), щоб фінальне значення осіло читабельно.
- Масштабуйте тривалість лічби під розмір приросту — 10 очок не мають лічитись так само довго, як 10 000.

Чого уникати:
- Не блокуйте прогрес (переходи, інпут), поки тікер докручує, — дайте йому наздогнати або пропустіть за вимогою.
- Не крутіть настільки повільно, що кілька приростів стають у чергу й екран відстає від гри на секунди.
- Не озвучуйте кожну зміну цифри на високій швидкості — обмежуйте частоту чи змінюйте тон, інакше вийде дзижчання.

Реалізуй ефект у тому рушії/стеку, який уже використовується в проєкті, і дотримуйся наявного стилю коду. Підключи його там, де це доречно.