FreeText Effects

Text Outline Hover

Use this for playful section headers, portfolio intros, brand moments, and visual dividers where text itself should become the interaction.

ReactTailwind CSSTextHover

ACE

Overview

A giant outlined text effect that fills with color on hover.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

No additional packages required after Tailwind CSS setup.

Usage

tsx

<TextOutlineHover />

Text Outline Hover.tsx

tsx

export function TextOutlineHover() {
  return (
    <div className="group flex min-h-[260px] items-center justify-center overflow-hidden rounded-xl border border-white/10 bg-black p-6">
      <h3 className="text-7xl font-black leading-none text-transparent [-webkit-text-stroke:1px_rgba(255,255,255,.22)] transition-all duration-500 group-hover:text-lime-300 group-hover:[-webkit-text-stroke:1px_rgb(190,242,100)] sm:text-8xl">
        ACE
      </h3>
    </div>
  );
}