Spring Reveal
Пружинный stagger-выход карточек на Motion (motion.dev) с hover-откликом.
Пропсы
Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.
| Проп | Тип | По умолчанию | Что это |
|---|---|---|---|
| items? | string[] | ITEMS |
Установка
npx shadcn@latest add https://motiva.pages.dev/r/spring-reveal.jsonзависимости: motion@^12.42.2
Что нужно в проекте до установки
Файл
components.jsonв корнеИз него CLI узнаёт, куда класть файлы. Алиасы — в такой форме:
"aliases": { "components": "@/components", "lib": "@/lib" }Нет файла — установка не начнётся вовсе.
Алиас
@объявлен дваждыВ корневом
tsconfig.jsonи в конфиге сборщика. В Vite корневой tsconfig часто содержит толькоreferences— этого мало."paths": { "@/*": ["./src/*"] } // tsconfig.json resolve.alias = { "@": "/src" } // vite.config.tsБез
pathsCLI молча создаёт папку с именем@.Токены подключены один раз на приложение
Они приезжают вместе с записью — достаточно импортировать их в точке входа:
import "@/styles/motiva-tokens.css";Без них блок потеряет цвета, ритм и тему.
Своя типографика не спорит с блоком
Наследуемые свойства протекают внутрь:
text-align: centerна обёртке отцентрует содержимое секции. То же касаетсяfont-familyиline-height.Проект без TypeScript? всё равно нужен tsconfig
CLI грузит
tsconfig.jsonбезусловно, а при"tsx": falseидёт заjsconfig.jsonи падает так же. Минимум — файл сpathsи"tsx": trueвcomponents.json.Приехавший рядом
.tsxможно не трогать — вам нужен.vanilla.js.
Экспорт
Код
"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());
}
