Hero made by @ybouane.

@crazygl/hero-shine-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.

Demo

Shine Text

Install

npm install @crazygl/hero-shine-text

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, glowOpacity of the pulsing halo.
• Colours — topColor/baseColor/bottomColor (silver face), shineColor (core), tintColor (iridescence), plus fontSize, headingFontFamily, headingFontWeight.
• Backdrop — transparentBackground or a solid bgColor.

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.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.