Hover Text Effect

A text hover effect that animates and outlines gradient on hover. animate your own way

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

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

const DemoOne = () => {
  return (
    <div className="h-[40rem] flex items-center justify-center">
      <TextHoverEffect text="21st.dev" />
    </div>
  );
};

export { DemoOne };