Glow Border

Карточка с вращающимся conic-градиентным свечением по краю — чистый CSS на @property.

cssautoparallaxbasic~1 КБreduced-motion ✓

Пропсы

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

Проп	Тип	По умолчанию	Что это
children	ReactNode	—

Установка

npx shadcn@latest add https://motiva.pages.dev/r/glow-border.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

Код

@property --gb-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.gb {
  position: relative;
  border-radius: 16px;
  padding: 1.5px;
  overflow: hidden;
  isolation: isolate;
}

.gb::before {
  content: "";
  position: absolute;
  inset: -60%;
  z-index: -1;
  background: conic-gradient(from var(--gb-a), transparent 0deg, oklch(0.72 0.15 220) 60deg, oklch(0.62 0.19 280) 120deg, transparent 180deg);
  animation: gb-spin 4s linear infinite;
}

.gb-inner {
  border-radius: 15px;
  background: oklch(0.16 0.02 270);
  padding: 1.75rem;
  color: oklch(0.92 0.01 265);
}

@keyframes gb-spin {
  to {
    --gb-a: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gb::before {
    animation: none;
  }
}

import { type ReactNode } from "react";
import "./glow-border.css";

/** Карточка с вращающимся conic-градиентным свечением по краю (чистый CSS + @property). */
export function GlowBorder({ children }: { children: ReactNode }) {
  return (
    <div className="gb">
      <div className="gb-inner">{children}</div>
    </div>
  );
}

Glow Border

Пропсы

Установка

Экспорт

Код

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