Spring Reveal

Пружинный stagger-выход карточек на Motion (motion.dev) с hover-откликом.

motionloadhoverspringstaggerbasic~34 КБreduced-motion ✓

Пропсы

Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.

Проп	Тип	По умолчанию	Что это
items?	string[]	ITEMS

Установка

npx shadcn@latest add https://motiva.pages.dev/r/spring-reveal.json

зависимости: motion@^12.42.2

Что нужно в проекте до установки

components.json в корне — с алиасами в форме"components": "@/components". Нет файла — CLI не поймёт, куда класть.
Алиас @ объявлен дважды: "paths": {"@/*": ["./src/*"]} в корневом tsconfig.json (в Vite он часто содержит только references — тогда CLI создаёт папку@) и resolve.alias в конфиге сборщика.
Токены подключены один раз на приложение:import "@/styles/motiva-tokens.css" — они приезжают вместе с записью. Без них секция потеряет цвета, ритм и тему.
Своя типографика не должна спорить: если у вас на обёрткеtext-align: center, он протечёт внутрь блоков.
Проект без TypeScript? Всё равно нужен минимальныйtsconfig.json с pathsи "tsx": true в components.json: CLI грузит tsconfig безусловно, а с "tsx": false идёт за jsconfig.json и падает так же. Приехавший рядом.tsx можно не трогать — вам нужен.vanilla.js.

Экспорт

↓ Скачать .zip

Код

"use client";

import { motion } from "motion/react";

const ITEMS = ["◆", "●", "▲", "★", "✦", "◈"];

/** Пружинный stagger-выход карточек на Motion. `?noanim`/data-shot → сразу финальное состояние. */
export function SpringReveal({ items = ITEMS }: { items?: string[] }) {
  const frozen =
    typeof document !== "undefined" && document.documentElement.hasAttribute("data-shot");

  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 72px)", gap: "14px" }}>
      {items.map((it, i) => (
        <motion.div
          key={i}
          initial={frozen ? false : { opacity: 0, y: 28, scale: 0.8 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          transition={{ delay: frozen ? 0 : i * 0.09, type: "spring", stiffness: 320, damping: 18 }}
          whileHover={{ scale: 1.08, rotate: 6 }}
          style={{
            display: "grid",
            placeItems: "center",
            width: 72,
            height: 72,
            borderRadius: 16,
            background: "linear-gradient(135deg, oklch(0.62 0.19 280), oklch(0.72 0.15 220))",
            color: "#fff",
            fontSize: "1.6rem",
            cursor: "pointer",
          }}
        >
          {it}
        </motion.div>
      ))}
    </div>
  );
}

import { animate } from "motion";

/**
 * Spring Reveal — vanilla JS/Motion (без React). Дети контейнера входят пружиной со стаггером.
 *
 *   <div id="grid"><div class="card">◆</div><div class="card">●</div>…</div>
 *   <script type="module">
 *     import { initSpringReveal } from './spring-reveal.vanilla.js';
 *     initSpringReveal(document.querySelector('#grid'), { stagger: 0.09 });
 *   </script>
 *
 * @param {HTMLElement} container
 * @param {{ itemSelector?: string, stagger?: number }} [options]
 * @returns {() => void} destroy
 */
export function initSpringReveal(container, { itemSelector = ":scope > *", stagger = 0.09 } = {}) {
  const items = [...container.querySelectorAll(itemSelector)];
  const frozen =
    document.documentElement.hasAttribute("data-shot") ||
    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (frozen) return () => {};

  const anims = items.map((item, i) => {
    item.style.opacity = "0";
    item.style.transform = "translateY(28px) scale(0.8)";
    return animate(
      item,
      { opacity: 1, transform: "translateY(0px) scale(1)" },
      { delay: i * stagger, type: "spring", stiffness: 320, damping: 18 },
    );
  });

  return () => anims.forEach((a) => a.stop());
}

Spring Reveal

Пропсы

Установка

Экспорт

Код

Похожие эффекты