Gradient Text

Анимированный градиентный текст: background-clip:text, широкий градиент бесконечно течёт по буквам.

cssautobasic0reduced-motion ✓

Пропсы

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

Проп	Тип	По умолчанию	Что это
children?	ReactNode	"Градиент течёт по тексту"
duration?	number	6	Длительность цикла, сек (формат «6»).
colors?	string[]	["oklch(0.75 0.16 300)", "oklch(0.78 0.1…
style?	CSSProperties	—

Установка

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

Код

import type { CSSProperties, ReactNode } from "react";

export interface GradientTextProps {
  children?: ReactNode;
  /** Длительность цикла, сек (формат «6»). */
  duration?: number;
  colors?: string[];
  style?: CSSProperties;
}

/**
 * Анимированный градиентный текст: background-clip:text + широкий градиент едет по
 * background-position. Чистый CSS. Reduced-motion/data-shot — градиент статичен.
 */
export function GradientText({
  children = "Градиент течёт по тексту",
  duration = 6,
  colors = ["oklch(0.75 0.16 300)", "oklch(0.78 0.14 210)", "oklch(0.8 0.15 150)", "oklch(0.75 0.16 300)"],
  style,
}: GradientTextProps) {
  return (
    <span
      className="gt-text"
      style={
        {
          "--gt-dur": `${duration}s`,
          backgroundImage: `linear-gradient(90deg, ${colors.join(", ")})`,
          ...style,
        } as CSSProperties
      }
    >
      <style>{`
        .gt-text {
          display: inline-block;
          font-size: clamp(1.8rem, 1rem + 3.6vw, 3.2rem);
          font-weight: 800;
          letter-spacing: -0.02em;
          background-size: 300% 100%;
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
          animation: gt-flow var(--gt-dur) linear infinite;
        }
        @keyframes gt-flow { to { background-position: 300% 0; } }
        @media (prefers-reduced-motion: reduce) { .gt-text { animation: none; } }
      `}</style>
      {children}
    </span>
  );
}

Gradient Text

Пропсы

Установка

Экспорт

Код

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