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 в корне
Из него CLI узнаёт, куда класть файлы. Алиасы — в такой форме:
```
"aliases": { "components": "@/components", "lib": "@/lib" }
```
Нет файла — установка не начнётся вовсе.
Алиас @ объявлен дважды
В корневом tsconfig.json и в конфиге сборщика. В Vite корневой tsconfig часто содержит только references — этого мало.
```
"paths": { "@/*": ["./src/*"] }        // tsconfig.json
resolve.alias = { "@": "/src" }        // vite.config.ts
```
Без paths CLI молча создаёт папку с именем @.
Токены подключены один раз на приложение
Они приезжают вместе с записью — достаточно импортировать их в точке входа:
```
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.

Экспорт

↓ Скачать .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

Пропсы

Установка

Файл `components.json` в корне

Алиас `@` объявлен дважды

Токены подключены один раз на приложение

Своя типографика не спорит с блоком

Проект без TypeScript? всё равно нужен tsconfig

Экспорт

Код

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

Glow Border

Пропсы

Установка

Файл components.json в корне

Алиас @ объявлен дважды

Токены подключены один раз на приложение

Своя типографика не спорит с блоком

Проект без TypeScript? всё равно нужен tsconfig

Экспорт

Код

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

Файл `components.json` в корне

Алиас `@` объявлен дважды