Text Hover Effect

Text 105

About

A text hover effect that animates and outlines gradient on hover, as seen on x.ai

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

Code

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

Usage.tsx

import React from "react";
import { TextHoverEffect } from "@/components/ui/text-hover-effect";

export function TextHoverEffectDemo() {
  return (
    <div className="h-[40rem] flex items-center justify-center">
      <TextHoverEffect text="ACET" />
    </div>
  );
}