Skeleton Shimmer
Скелетон-карточка с бегущим бликом: одна keyframes-анимация синхронно ведёт shimmer по всем «костям».
Установка
npx shadcn@latest add https://motiva.pages.dev/r/skeleton-shimmer.jsonЧто нужно в проекте до установки
Файл
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.
Экспорт
Код
.sk-card [data-bone]::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(100deg, transparent 30%, oklch(0.5 0.02 270 / 0.35) 50%, transparent 70%);
animation: sk-sweep 1.6s ease-in-out infinite;
}
@keyframes sk-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
.sk-card [data-bone]::after { animation: none; }
}
const css = `.sk-card [data-bone]::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(100deg, transparent 30%, oklch(0.5 0.02 270 / 0.35) 50%, transparent 70%);
animation: sk-sweep 1.6s ease-in-out infinite;
}
@keyframes sk-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
.sk-card [data-bone]::after { animation: none; }
}
`;
import type { CSSProperties } from "react";
const bone = (extra: CSSProperties): CSSProperties => ({
borderRadius: 8,
background: "oklch(0.24 0.015 270)",
position: "relative",
overflow: "hidden",
...extra,
});
/**
* Скелетон-карточка с бегущим бликом (shimmer): градиентная полоса едет по «костям»
* синхронно (общая keyframes-анимация). Чистый CSS. Reduced-motion/data-shot — блик статичен.
*/
export function SkeletonShimmer() {
return (
<div
className="sk-card"
style={{
width: "min(320px, 84vw)",
padding: "1.2rem",
borderRadius: 16,
border: "1px solid oklch(0.3 0.02 270)",
background: "oklch(0.18 0.02 270)",
display: "grid",
gap: 12,
}}
aria-busy="true"
aria-label="Загрузка контента"
>
<style href="motiva-skeleton-shimmer" precedence="medium">{css}</style>
<div style={{ display: "flex", gap: 12, alignItems: "center" }}>
<div data-bone style={bone({ width: 44, height: 44, borderRadius: "50%" })} />
<div style={{ display: "grid", gap: 8, flex: 1 }}>
<div data-bone style={bone({ height: 12, width: "70%" })} />
<div data-bone style={bone({ height: 10, width: "45%" })} />
</div>
</div>
<div data-bone style={bone({ height: 130, borderRadius: 12 })} />
<div style={{ display: "grid", gap: 8 }}>
<div data-bone style={bone({ height: 10 })} />
<div data-bone style={bone({ height: 10, width: "85%" })} />
<div data-bone style={bone({ height: 10, width: "60%" })} />
</div>
</div>
);
}
