Gradient Orb
Пульсирующий градиентный шар с настраиваемыми оттенком, размером, свечением и скоростью — крути в панели и копируй.
Пропсы
Разобрано из кода записи: обязательные — без «?», у остальных показано значение по умолчанию.
| Проп | Тип | По умолчанию | Что это |
|---|---|---|---|
| hue? | number | 280 | |
| size? | number | 140 | |
| glow? | number | 40 | |
| speed? | number | 3 |
Установка
npx shadcn@latest add https://motiva.pages.dev/r/gradient-orb.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.
Экспорт
Код
.orb {
border-radius: 50%;
animation: orb-pulse var(--orb-speed, 3s) ease-in-out infinite;
}
@keyframes orb-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
@media (prefers-reduced-motion: reduce) {
.orb {
animation: none;
}
}
import { type CSSProperties } from "react";
import "./gradient-orb.css";
export interface GradientOrbProps {
hue?: number;
size?: number;
glow?: number;
speed?: number;
}
/** Пульсирующий градиентный шар. Все параметры выносятся в панель Motiva (Tier-2 tune-then-copy). */
export function GradientOrb({ hue = 280, size = 140, glow = 40, speed = 3 }: GradientOrbProps) {
return (
<div
className="orb"
style={
{
width: size,
height: size,
background: `radial-gradient(circle at 35% 30%, oklch(0.84 0.13 ${hue}), oklch(0.5 0.2 ${hue}) 72%)`,
boxShadow: `0 0 ${glow}px oklch(0.6 0.2 ${hue} / 0.55)`,
"--orb-speed": `${speed}s`,
} as CSSProperties
}
/>
);
}
