Shiny Text

Металлический блик по тексту: градиент шире строки едет по background-position, текст работает маской. Один слой заливки — эффект живёт на любом объёме текста.

cssautorevealbasic~1 КБreduced-motion ✓

↗

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

Цвет блика#ffffffПериод, с3

Пропсы

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

Проп	Тип	По умолчанию	Что это
children?	ReactNode	"премиум-каталог анимаций"
color?	string	"#8b8b99"	Базовый цвет текста (формат «#8b8b99»).
shine?	string	"#ffffff"	Цвет блика (формат «#ffffff»).
duration?	number	3	Длительность пробега, сек (формат «3»).

Установка

npx shadcn@latest add https://motiva.pages.dev/r/shiny-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 ShinyTextProps {
  children?: ReactNode;
  /** Базовый цвет текста (формат «#8b8b99»). */
  color?: string;
  /** Цвет блика (формат «#ffffff»). */
  shine?: string;
  /** Длительность пробега, сек (формат «3»). */
  duration?: number;
}

/**
 * Металлический блик по тексту: градиент шире строки едет по background-position,
 * а текст работает маской (`background-clip: text`). Ни одного элемента-обёртки на букву —
 * это один слой заливки, поэтому эффект живёт на любом объёме текста и не мешает выделению.
 */
export function ShinyText({
  children = "премиум-каталог анимаций",
  color = "#8b8b99",
  shine = "#ffffff",
  duration = 3,
}: ShinyTextProps) {
  return (
    <>
      <style>{`
        @keyframes sht-slide { to { background-position: -200% 0; } }
        .sht {
          display: inline-block;
          background-image: linear-gradient(110deg,
            var(--sht-color) 0%, var(--sht-color) 42%,
            var(--sht-shine) 50%,
            var(--sht-color) 58%, var(--sht-color) 100%);
          background-size: 200% auto; background-position: 0 0;
          -webkit-background-clip: text; background-clip: text; color: transparent;
          animation: sht-slide var(--sht-dur) linear infinite;
        }
        @media (prefers-reduced-motion: reduce) { .sht { animation: none; } }
        html[data-shot] .sht { animation: none; }
      `}</style>
      <span
        className="sht"
        style={
          { "--sht-color": color, "--sht-shine": shine, "--sht-dur": `${duration}s` } as CSSProperties
        }
      >
        {children}
      </span>
    </>
  );
}

Shiny Text

Пропсы

Установка

Экспорт

Код

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