Gradient Mesh
Мягко дышащий фон из размытых цветных пятен — чистый CSS, ноль JS.
Пропсы
Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.
| Проп | Тип | По умолчанию | Что это |
|---|---|---|---|
| className? | string | — | |
| backdrop? | string | false | — | Подложка: CSS-значение `background` или `false`, чтобы не рисовать её вовсе. `false` нужен, когда запись стоит фоном СЕКЦИИ и подложку задаёт она — иначе две подложки спорят за один слой. |
Установка
npx shadcn@latest add https://motiva.pages.dev/r/gradient-mesh.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.
Экспорт
Код
.gm {
position: absolute;
inset: 0;
overflow: hidden;
background: #0a0a10;
}
.gm span {
position: absolute;
width: 55%;
aspect-ratio: 1;
border-radius: 50%;
filter: blur(70px);
opacity: 0.75;
will-change: transform;
}
.gm span:nth-child(1) {
background: oklch(0.62 0.2 280);
top: -10%;
left: -5%;
animation: gm-a 11s ease-in-out infinite alternate;
}
.gm span:nth-child(2) {
background: oklch(0.68 0.16 210);
top: 20%;
right: -10%;
animation: gm-b 13s ease-in-out infinite alternate;
}
.gm span:nth-child(3) {
background: oklch(0.6 0.21 330);
bottom: -15%;
left: 25%;
animation: gm-c 9s ease-in-out infinite alternate;
}
@keyframes gm-a {
to {
transform: translate(35%, 30%) scale(1.2);
}
}
@keyframes gm-b {
to {
transform: translate(-30%, 25%) scale(0.9);
}
}
@keyframes gm-c {
to {
transform: translate(20%, -30%) scale(1.15);
}
}
@media (prefers-reduced-motion: reduce) {
.gm span {
animation: none;
}
}
import "./gradient-mesh.css";
export interface GradientMeshProps {
className?: string;
/**
* Подложка: CSS-значение `background` или `false`, чтобы не рисовать её вовсе.
* `false` нужен, когда запись стоит фоном СЕКЦИИ и подложку задаёт она — иначе две
* подложки спорят за один слой.
*/
backdrop?: string | false;
}
/** Анимированный градиентный меш из размытых пятен (чистый CSS). */
export function GradientMesh({ className, backdrop }: GradientMeshProps = {}) {
return (
<div
className={className ? `gm ${className}` : "gm"}
aria-hidden="true"
// подложка живёт в CSS-классе; инлайн нужен только чтобы её перебить или снять
style={backdrop === undefined ? undefined : { background: backdrop === false ? "transparent" : backdrop }}
>
<span />
<span />
<span />
</div>
);
}
