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

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

Text Shadow Reveal

Текст с эффектом объемной глубины и подсветкой теней при наведении.

Text Shadow Reveal

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

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

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

<ShadowRevealText>Content</ShadowRevealText>

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

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

ShadowRevealText.tsx
'use client';

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

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

export function ShadowRevealText({ children }: ShadowRevealTextProps) {
  return (
    <>
      <h2 className="rev-text" data-rk-9adbdb="">{children}</h2>
    </>
  );
}

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

.rev-text:where([data-rk-9adbdb]) { font-size: 3.5rem; font-weight: 900; color: #fff; text-shadow: 4px 4px 0px rgba(99,102,241,0.3), 8px 8px 0px rgba(0,0,0,0.5); margin: 0; line-height: 1.1; }
@media (max-width: 768px) { .rev-text:where([data-rk-9adbdb]) { font-size: 2rem; } }

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

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