Типографикаtypography3dcreative

3D Stacked Text

Многослойный объемный 3D-текст с реалистичными тенями глубины.

3D Stacked Text

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

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

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

<Text3DLayer>3D TEXT</Text3DLayer>

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

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

'use client';

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

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

export function Text3DLayer({ children }: Text3DLayerProps) {
  return (
    <>
      <div className="stack-3d" data-rk-68aabd="">{children}</div>
    </>
  );
}

export default Text3DLayer;

/* Text3DLayer — ported from astro-component-kit (typography/Text3DLayer.astro) */

.stack-3d:where([data-rk-68aabd]) { font-size: 4rem; font-weight: 900; color: #fff; position: relative; text-shadow: 1px 1px #6366f1, 2px 2px #6366f1, 3px 3px #6366f1, 4px 4px #6366f1; line-height: 1.1; }
@media (max-width: 768px) { .stack-3d:where([data-rk-68aabd]) { font-size: 2.5rem; } }

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

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

Живое превью

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

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

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