CrazyGLHover Text Link
A list of inline links with an animated underline-fill on hover — the text gets a coloured wipe that grows from left.
Usage
import HoverTextLink from '@crazygl/hero-hovertext-link';
export default function Page() {
return (
<HoverTextLink
intro="We design,"
link1Label="build"
link1Url="/build"
mid=", and"
link2Label="ship"
link2Url="/ship"
outro="products that earn trust."
hoverFill="#5b8def"
/>
);
}Customise
- Content —
intro,link1Label/link1Url,mid,link2Label/link2Url,outro. - Style —
textColor,linkColor,hoverFill(the colour that rises in),fontSize,headingFontFamily,headingFontWeight. - Backdrop —
transparentBackgroundtoggle andbgColor.
Best for
- Agency, studio, and portfolio headers where the headline doubles as navigation.
- Minimal landing pages that want one expressive, interactive statement.
- Anywhere an inline link should feel intentional and tactile rather than a plain underline.
One command, zero config.
npm install @crazygl/hero-hovertext-linkImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import HoverTextLink from '@crazygl/hero-hovertext-link';
export default function Landing() {
return (
<HoverTextLink />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import HoverTextLink from '@crazygl/hero-hovertext-link';
export default function Page() {
return (
<section>
<HoverTextLink
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
