Hero made by @ybouane.

@crazygl/hero-waving-flag-headline

Your headline printed on a slow-waving cloth flag. The fabric ripples in 3D with soft cinematic lighting; the cursor pushes the cloth like a gust of wind.

Demo

Waving Flag Headline

Install

npm install @crazygl/hero-waving-flag-headline

Usage

import WavingFlagHeadline from '@crazygl/hero-waving-flag-headline';

export default function Hero() {
	return (
		<WavingFlagHeadline
			heading="CHAMPIONS NEVER REST"
			fabricColor="#c8362e"
			attachmentEdge="left"
		/>
	);
}

Customise

• Content — contentMode (text printed on the cloth, or an flagImage logo), heading, subheading, and a ctaLabel/onCTAClick.
• Flag — flagWidth, flagHeight, attachmentEdge (left pole / top banner / free-floating).
• Fabric — fabricColor, textColor, materialMode (fabric / shiny / reflective) with per-mode roughness, sheen, clearcoat, HDRI and reflection knobs.
• Wind — windStrength, windSpeed, pointerWindStrength.
• Lighting — keyLightIntensity, fillLightIntensity, ambientIntensity.
• Background — bgTop/bgBottom gradient or transparentBackground.
• Typography — headingFontFamily, headingFontWeight.

Best for

• Sports and athletic brands; fashion drops and streetwear.
• Music and event landing pages; bold campaign headlines.
• Team / community sites wanting a confident, kinetic statement.

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.