CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/cloth-wave

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.

ReactWebGLInteractiveFont#cloth#silk#anisotropic#vertex-displacement#fabric#premium

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

One command, zero config.

npm install @crazygl/hero-cloth-wave
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 ClothWave from '@crazygl/hero-cloth-wave';

export default function Landing() {
  return (
    <ClothWave />
  );
}
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 ClothWave from '@crazygl/hero-cloth-wave';

export default function Page() {
  return (
    <section>
      <ClothWave
        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

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.

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.

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.

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.

Depth Wave Field

A perspective grid of small glowing dots forms an undulating 3D wave terrain that recedes into the distance and fades to black — the look of a topographic depth-sensing point cloud. Smooth traveling waves ripple through the field; crests glow electric violet, troughs and far rows sink into deep indigo. The pointer pushes a ripple toward the cursor.

Ice Surface

A glassy frozen pane fills the frame. Tap or drag to spread fresh cracks; old fractures slowly heal.Live customizer

Cloth Wave

Silk colourBase diffuse hue of the fabric.Highlight colourAnisotropic specular tint — the glint along the fibre.Rim colourSubtle Fresnel rim.Anisotropy1How tight the silk highlight is. Real silk: ~1.0–1.4.Fibre angle (°)20°Orientation of the warp threads. Highlights run perpendicular.Sheen0.6Diffuse sheen amount — that velvety silk glow at grazing angles.Wind direction (°)12°Wind amplitude0.5How far the cloth folds.Wind speed1Wave scale1How tightly the fabric ripples.BG topBG bottomHeading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.