Hero made by @ybouane.

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

Demo

Cloth Wave

Install

npm install @crazygl/hero-cloth-wave

Usage

import ClothWave from '@crazygl/hero-cloth-wave';

export default function Hero() {
  return (
    <ClothWave
      heading="Silk in the wind."
      silkColor="#5b1235"
      highlightColor="#ffd29c"
      anisotropy={1}
    />
  );
}

Customise

• Material — silkColor, highlightColor (the fibre glint), rimColor (Fresnel edge), anisotropy (highlight tightness, ~1.0–1.4 is real silk), fiberAngle (warp orientation; highlights run perpendicular), sheen (grazing-angle velvet glow).
• Wind — windAngle, windAmplitude (fold depth), windSpeed, scale (ripple frequency).
• Background — bgTopColor / bgBottomColor gradient bleeding through the corner vignette.
• Content & Typography — contentType (heading / two-columns / custom) and headingFontFamily.

Best for

• Luxury fashion, textile, perfume and beauty brand pages.
• Premium product launches wanting a tactile, material feel.
• Editorial / portfolio sites that want motion without literal imagery.

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.