Магнитные карточки — фото, которые курсор толкает и они пружинят назад

Что это за эффект

Несколько карточек с фото лежат в ряд, слегка вразброс, как разложенные на столе снимки. Проведите курсором рядом с ними: те, что ближе, сдвинутся по ходу движения мыши и наклонятся, соседние карточки дёрнутся следом, но слабее. Затем все пружинят обратно на свои места с лёгким покачиванием. Если курсор стоит, карточки не двигаются: толкает только движение.

Под капотом простая физика: каждая карточка привязана к своему месту пружиной с затуханием, а курсор передаёт ей толчок по скорости своего движения. Чем ближе карточка к курсору, тем сильнее толчок. Эффект сделан по мотивам «Magnetic Cards» от Codegrid, но без GSAP.

Где использовать

• Первый экран портфолио с несколькими работами.
• Блок «О нас» с фото команды или офиса.
• Подборка товаров на лендинге, чтобы блок оживал под мышью.

Как добавить на сайт

Через ИИ-агента — самый простой путь. Эти эффекты сделаны в первую очередь для тех, кто собирает сайт вместе с ИИ-агентом: Claude Code, Cursor или любым другим. Настройте эффект на примере выше, нажмите «Скопировать код» и вставьте его в чат агента с одной фразой: «Сделай мне такой эффект на сайте». В скопированном коде уже есть описание эффекта и инструкция для агента. Он сам перенесёт стили, разметку и скрипт и подставит ваши фото. Ваши настройки сохранятся.

Вручную. «Скачать код» даёт готовую HTML-страницу с вашими настройками. «Скопировать код» копирует только стили, разметку и скрипт. Скрипт без зависимостей.

<div class="magnet-stage">
  <div class="magnet-card" data-magnet-card><img src="photo-1.jpg" alt=""></div>
  <!-- ещё карточки -->
</div>

createMagneticCards(document.querySelector('.magnet-stage'), { size: 250, push: 10 });

Размер и места карточек скрипт задаёт сам, раскладывая их вокруг центра блока. На узком экране ряд уменьшается целиком, чтобы поместиться.

Настройки

• Размер карточки и шаг — сторона карточки и расстояние между соседними.
• Радиус — как далеко от курсора карточки его чувствуют.
• Сила толчка — насколько далеко движущийся курсор отбрасывает карточки.
• Наклон — насколько карточка поворачивается от толчка.
• Соседи — какую долю толчка получают соседние карточки. При нуле каждая двигается сама по себе.
• Упругость — как сильно карточки тянутся на место.
• Затухание — как быстро они успокаиваются. Чем больше, тем дольше покачиваются.

Доступность и производительность

Карточки остаются обычными картинками с подписями. Если в системе включено «Уменьшить движение», они спокойно лежат на местах. Когда карточки успокоились, скрипт засыпает и просыпается только от движения мыши; двигается только transform.

Частые вопросы

Сколько карточек можно положить? Сколько угодно: скрипт раскладывает их в ряд по центру. Если их много, уменьшите шаг или размер.

Работает ли на телефоне? Да, карточки откликаются на движение пальца по блоку.

Нужен ли GSAP, как в оригинале? Нет. Физика — около двадцати строк JavaScript.