1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографикаtypographyshimmerglass

Glass Text Shimmer

Появление текста с эффектом рассеивания матового стекла и подсветкой.

Glass Text Shimmer

Использование

Скопируйте и вставьте этот код в ваш React-компонент:

tsx
import { GlassTextReveal } from 'react-component-kit-ui/typography';

<GlassTextReveal>Content</GlassTextReveal>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/GlassTextReveal.tsx + GlassTextReveal.css:

GlassTextReveal.tsx
'use client';

import type { ReactNode } from 'react';
import './GlassTextReveal.css';

/** GlassTextReveal — ported from astro-component-kit. */
export interface GlassTextRevealProps {
  children?: ReactNode;
}

export function GlassTextReveal({ children }: GlassTextRevealProps) {
  return (
    <>
      <h3 className="shimmer-txt" data-rk-ca8ede="">{children}</h3>
    </>
  );
}

export default GlassTextReveal;
GlassTextReveal.css
/* GlassTextReveal — ported from astro-component-kit (typography/GlassTextReveal.astro) */

.shimmer-txt:where([data-rk-ca8ede]) { font-size: 2rem; color: rgba(255,255,255,0.2); background: linear-gradient(90deg, transparent, #fff, transparent); background-size: 200% 100%; -webkit-background-clip: text; animation: glass-text-reveal-shimmer-anim 3s infinite linear; margin: 0; font-weight: 800; }
@keyframes glass-text-reveal-shimmer-anim { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } }

Краткая информация

Категория
Типографика
Имя файла
GlassTextReveal.tsx
Зависимости
Нет — чистый React + CSS
Теги
typographyshimmerglass