Rolling Counter

Хорошо смотрится в аналитике, KPI-секциях, лендингах агентств и продуктовых статистических модулях.

Framer MotionCounter transitions

Готовый сниппет для переноса

У каждой демки есть React-компонент, который можно скопировать и адаптировать под HTML embed или кастомный блок в Tilda. Библиотека собрана Luneka Lab как showroom motion-подходов для клиентских сайтов.

Написать нам Работать с нами

Назад в библиотеку

Загрузка сцены

React component

Rolling Counter

'use client';

import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';

export function RollingCounter() {
  const [value, setValue] = useState(124);

  useEffect(() => {
    const timer = window.setInterval(() => setValue((current) => current + 7), 1200);
    return () => window.clearInterval(timer);
  }, []);

  return <motion.div key={value}>{value}</motion.div>;
}