Gradient Mesh

Мягко дышащий фон из размытых цветных пятен — чистый CSS, ноль JS.

cssautoparallaxbasic~1 КБreduced-motion ✓

Пропсы

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

Проп	Тип	По умолчанию	Что это
className?	string	—
backdrop?	string \| false	—	Подложка: CSS-значение `background` или `false`, чтобы не рисовать её вовсе. `false` нужен, когда запись стоит фоном СЕКЦИИ и подложку задаёт она — иначе две подложки спорят за один слой.

Установка

npx shadcn@latest add https://motiva.pages.dev/r/gradient-mesh.json

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

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

Код

.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>
  );
}

Gradient Mesh

Пропсы

Установка

Экспорт

Код

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