Gradient Orb

Пульсирующий градиентный шар с настраиваемыми оттенком, размером, свечением и скоростью — крути в панели и копируй.

cssautospringbasic~1 КБreduced-motion ✓

🎛 Настройки — крути и копируй

Оттенок280Размер140Свечение40Скорость, с3

Пропсы

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

Проп	Тип	По умолчанию
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 в корне — с алиасами в форме"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

Код

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

Gradient Orb

Пропсы

Установка

Экспорт

Код

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