Text Hover Effect
Large SVG text with animated stroke that appears on hover.
Preview
Text Hover Effect
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Section dividers and dramatic text moments.
Why this component matters
The stroke animation reveals the text as a drawn form, bridging typography and illustration.
Usage guidance
Use for short, impactful words (1-3 words max). Best on dark backgrounds with white or purple stroke. Use sparingly — one instance per page.
Installation
bash
npx shadcn@latest add @aceternity/text-hover-effectUsage
example.tsxtsx
import { TextHoverEffect } from "@/components/ui/text-hover-effect";
export default function Example() {
return (
<TextHoverEffect>
{/* Your content here */}
</TextHoverEffect>
);
}Source
text-hover-effect.tsx
components/ui/text-hover-effect.tsx