14 спиннеров из одной сетки 3×3

Смотришь на анимированные индикаторы загрузки и видишь сложность: спирали, волны, импульсы. На деле — девять квадратиков и правильные задержки между ними.

Структура: сетка с индексами

Сетка 3×3. Каждая клетка мигает. Вся магия — в моменте старта. Сдвинешь анимацию на 0.1 секунды — получишь волну. Переставишь порядок — спираль.

  [0, 1, 2]
  [3, 4, 5]
  [6, 7, 8]

Один компонент, один переход, четырнадцать эффектов.

Паттерны анимации: волна, пульс, спираль

Волна слева направо — колонки стартуют по очереди:

[0, 0.1, 0.2, 0, 0.1, 0.2, 0, 0.1, 0.2]

Пульсация из центра — центр первый (индекс 4), края последними:

[0.2, 0.1, 0.2, 0.1, 0, 0.1, 0.2, 0.1, 0.2]

Спираль по часовой — обход 0→1→2→5→8→7→6→3→4:

[0, 0.1, 0.2, 0.7, 0.8, 0.3, 0.6, 0.5, 0.4]

Логика одна. Массивы задержек — разные.

Код спиннера на Framer Motion

<motion.div
  animate={{
    backgroundColor: [dimColor, color, dimColor],
  }}
  transition={{
    duration: 1.2,
    delay: delays[index],
    repeat: Infinity,
    ease: 'easeInOut',
  }}
/>

Framer Motion берёт на себя интерполяцию. Мы указываем только задержку для каждой клетки.

Почему мозг видит паттерн

Мозг ловит согласованное движение. Девять точек, мигающих одновременно — статика. Те же точки с разбросом 0.1 секунды — волна, за которой следишь глазом.

Не нужны keyframes для каждого кадра. Не нужен canvas. Девять чисел и универсальный компонент.

Что расширяет компонент

• Размер и скругление — пропсы size и cellRadius
• Скорость — пропс duration
• Цвета — пресеты SpinnerColors.blue, .red, .emerald
• Маска клеток — для паттернов «только углы» или «только крест»

Логика массива задержек не меняется.