Components
Loading preview...
Here is Text Glow Hover component
@JurreHoutkamp
npx shadcn@latest add https://21st.dev/r/JurreHoutkamp/text-glow-hover// 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 ;