Text Glow Hover

Text 115

About

Here is Text Glow Hover component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Glow Hover to your project and fits it to your theme.

Code

How Text Glow Hover is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// src/demos/DemoOne.tsx

import { Component } from "@/components/ui/text-glow-hover";

// Для корректного отображения необходимо импортировать шрифт в вашем основном CSS-файле
// или в head вашего HTML:
// @import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');

const DemoOne = () => {
  return (
    // Демо-контейнер, заполняющий весь экран
    <div className="flex w-full h-screen justify-center items-center bg-[#111111]">
      {/* Контейнер для самого компонента, чтобы он не растягивался на весь экран */}
      <div className="w-full h-full">
        <Component
          // Используем те же пропсы, что и в оригинальном примере, для идентичного вида
          text="Light"
          copies={100}
          textColor="#FFFFFF"
          backgroundColor="#111111"
          font={{
            fontFamily: "UnifrakturMaguntia, system-ui",
            fontSize: 100,
            fontWeight: 600,
          }}
          shadowColor="#FFFFFF"
          useGradientGlow={false} // Можно включить (true) для градиентного эффекта
          animateGlow={false} // Включим пульсацию для динамики
          shadowScaleFactor={0.01}
          glowBlur={64}
          glowOpacity={2}
        />
      </div>
    </div>
  );
};

export default DemoOne ;