CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/waving-flag-headline

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.

ReactWebGL3DImageInteractiveFont#flag#cloth#fabric#three#vertex-displacement#gerstner#headline#premium

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.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-waving-flag-headline
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

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

export default function Landing() {
  return (
    <WavingFlagHeadline />
  );
}
03 · Use it in a page

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.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

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

export default function Page() {
  return (
    <section>
      <WavingFlagHeadline
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Cloth Wave

A large piece of silk fills the screen, undulating in wind with anisotropic highlights along its fibre direction. Pointer presses dent the fabric and slowly relax back.

Light Cloth Mesh

A glowing silk sheet woven from neon threads filling the frame and waving in 3D. Drag the pointer across the silk and it leaves a natural rippling wake — each touch sends an expanding wavefront, and the faster you sweep the stronger the ripples. Cyan-to-magenta threads glow on near-black.

Reactive Gradient Silk

A background of folded silk made of light — very smooth gradients with broad flowing folds drifting in slow, elegant fabric motion. The folds carry deep desaturated jewel tones and catch a soft specular sheen along each crease. The pointer presses a gentle indentation into the cloth: the folds bend around the cursor and the highlights and shadows shift with it.

Extruded 3D Headline Sculpture

Your headline as a thick, bevelled 3D sculpture floating under three-point studio lighting. Each letter has glossy bevelled edges, the camera parallaxes with your pointer so the depth reads from every angle, a soft contact shadow + AO strip ground it, and a real mirrored reflection fades into the glossy floor. A CTA button hover sends a sweep of light across the letters.

Water Ripple Headline

A bold headline printed on a moonlit pool. Stacked Gerstner waves and pointer-driven Gaussian wakes bend the letters in real time, and the CTA fires a circular wavefront across the surface. Reflective night water with soft moon highlights and a low cinematic camera.

Holographic Terrain

Low-poly wireframe terrain stretching to the horizon. Real vertex displacement (no faked depth), barycentric wireframe AA, distance fog, height-driven emissive on the peaks. Camera scrolls forward.Live customizer

Waving Flag Headline

CTA labelLeave empty to hide the CTA.On clickURL to navigate to when clicked. From code you can also pass a function — same prop name, type-detected at runtime.CTA text colourCTA backgroundFlag width2.25worldWorld-space width of the flag mesh.Flag height1.3worldWorld-space height of the flag mesh.Attached edgeWhich edge is pinned. Left = a flag on a pole; top = a banner hanging; none = a sheet drifting freely.Fabric colourBase colour of the cloth. Bold reds, blues, yellows read most flag-like.Text colourColour of the printed heading on the cloth.Material modeSurface finish. Fabric is matte canvas, Shiny is silky satin with sheen, Reflective is a mirror-metal flag that needs an HDRI for believable reflections.Fabric roughness0.60 reads as silk; 1 reads as canvas / linen.Fabric sheen0.4How much the fabric picks up grazing-angle highlights.Wind strength1How deep the waves carve into the cloth.Wind speed5.5How fast the waves travel across the flag.Pointer wind strength1How strongly cursor motion blows the cloth. The flag flutters AWAY from the pole; fast cursor swipes bias the wind in that direction without ever reversing it. Crank to 5 for storm-force gusts; 0 disables pointer wind.Key light1.55Main directional sun — drives the shaded folds.Fill light0.45Cool fill from the opposite side; controls how deep the shadows go.Ambient0.32Soft sky bounce. Low values give a more cinematic look.Transparent backgroundWhen on, the hero's backdrop is transparent so the page colour shows through.Background topBackground bottomHeading fontFont used to draw the heading. In text mode this is the print on the cloth; in image mode it is the HTML heading next to the flag.Heading font weight800Weight of the heading.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.