Text Hover Effect

text

Outlined stroke typography with dynamic spatial fill and glow on hover.

#text#hover#glow#outline

Live Interactive Preview

AURENZA

Component Source Code

Select language in the dropdown

TextHoverEffect.tsx

1'use client';
2
3import React from 'react';
4
5export default function TextHoverEffect() {
6  return (
7    <div className="relative flex items-center justify-center p-8 overflow-hidden select-none">
8      <h1 className="text-4xl sm:text-7xl font-black uppercase tracking-tighter text-transparent transition-all duration-500 hover:text-white [text-stroke:1px_#64748b] dark:[text-stroke:1px_#334155] hover:[text-stroke:0px] hover:scale-105 hover:drop-shadow-[0_0_25px_rgba(56,189,248,0.8)] cursor-pointer">
9        AURENZA
10      </h1>
11    </div>
12  );
13}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/text/TextHoverEffect.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import TextHoverEffect from '@/components/text/TextHoverEffect';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <TextHoverEffect />
7    </main>
8  );
9}