CrazyGLShine Text
Premium chrome-style shine — silver gradient face, soft wide highlight with iridescent tint leading the sweep, and a pulsing glow halo that breathes in sync.
Usage
import ShineText from '@crazygl/hero-shine-text';
export default function Hero() {
return (
<ShineText
heading="shine on"
shineSpeed={3.4}
tintColor="#b8c7ff"
/>
);
}Customise
- Content —
heading. - Shine —
shineSpeed(sweep duration),shineWidth,shineAngle. - Glow —
glowSize,glowOpacityof the pulsing halo. - Colours —
topColor/baseColor/bottomColor(silver face),shineColor(core),tintColor(iridescence), plusfontSize,headingFontFamily,headingFontWeight. - Backdrop —
transparentBackgroundor a solidbgColor.
Best for
- Enterprise and SaaS hero headings wanting a polished metallic wordmark.
- Product names, logotypes and launch banners.
- Luxury and premium brand pages needing a restrained, classy shine.
One command, zero config.
npm install @crazygl/hero-shine-textImport 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 ShineText from '@crazygl/hero-shine-text';
export default function Landing() {
return (
<ShineText />
);
}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 ShineText from '@crazygl/hero-shine-text';
export default function Page() {
return (
<section>
<ShineText
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
