Два способа подключить.

Поставьте пакет и импортируйте нужное — или скопируйте исходник компонента в свой проект и владейте им. В обоих случаях нужен проект на React 18+; подойдёт любой сборщик, который понимает импорт CSS (Vite, Next.js, Remix, Parcel).

01 Из npm

npm i @grigogo/ui

Стили приезжают вместе с компонентом, в сборку попадает только то, что импортировано, а каждый компонент экспортирует тип своих пропсов. Модули помечены 'use client' для App Router в Next.js.

02 Настройте прямо на своей странице

Оберните компонент в <Tune> на время работы: в углу вашего приложения появится тот же пульт с фейдерами, что здесь, изменения видны на настоящей странице, а Copy JSX отдаёт готовый код. В продакшен-сборке остаётся только сам компонент — пульт туда не попадает.

import { Aurora } from '@grigogo/ui';
import { Tune } from '@grigogo/ui/tune';

export default function Hero() {
  return (
    <Tune>
      <Aurora />
    </Tune>
  );
}

03 Общий ритм для всего приложения

Оберните приложение в <GrigogoProvider> — и все компоненты следуют одному акцентному цвету и одному темпу. Проп, заданный компоненту, важнее общего: уберите его — и компонент снова следует ритму; rhythm={false} исключает компонент совсем. Если на странице есть <Tune>, в пульте появляется вкладка Rhythm.

import { Aurora, GlitchText, GrigogoProvider } from '@grigogo/ui';

export default function App() {
  return (
    <GrigogoProvider accent="#ff3d7f" tempo={1.5}>
      <Aurora />
      {/* Keeps its own speed; everything else follows the tempo. */}
      <GlitchText text="Signal lost" interval={4000} />
    </GrigogoProvider>
  );
}

04 Или скопируйте исходник

Каждый компонент — один файл (и стили к нему). Скопируйте и меняйте что угодно.

1. 01

   Настройте на пульте

   Откройте компонент и двигайте фейдеры, пока не понравится. Пример кода обновляется с каждым изменением.

2. 02

   Скопируйте исходник

   На вкладке Код скопируйте файл .tsx (и файл .css, если он есть) в components/<Name>/.

3. 03

   Используйте

   Импортируйте как любой свой компонент и вставьте подобранные пропсы.

import SplitText from './components/SplitText/SplitText';

export default function Hero() {
  return (
    <SplitText
      as="h1"
      text="Каждая буква — в свой черёд."
      stagger={35}
      fromBlur={8}
    />
  );
}

— Заметки

• Анимации учитывают prefers-reduced-motion там, где это важно.
• Фоны на canvas и WebGL подстраиваются под родителя — задайте родителю высоту.
• Компоненты принимают className и style, поэтому работают с Tailwind, CSS-модулями и обычным CSS.
• Пишете на чистом JavaScript? Уберите типы — во время выполнения TypeScript ничего не делает.