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

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.

ReactWebGL3DInteractiveFont#3d#cloth#mesh#neon#wireframe#gerstner#waves#ripple#premium#three

Usage

import LightClothMesh from '@crazygl/hero-light-cloth-mesh';

export default function Landing() {
  return (
    <LightClothMesh
      heading="Woven from neon."
      threadColorA="#19f0ff"
      threadColorB="#ff3df0"
    />
  );
}

Customise

  • Content — contentType (heading / two-columns / custom), heading, subheading.
  • Cloth — gridResolution (thread density), clothSize, threadColorA/B, backgroundColor, glow.
  • Waves — waveHeight, waveSpeed, waveScale.
  • Ripple — rippleStrength, rippleSpeed, rippleWidth.
  • Camera — cameraTilt.
  • Backdrop — transparent.

Best for

  • Premium and futuristic SaaS, AI, and creative-tooling brands.
  • Fashion, textile, and fragrance launches.
  • Music and event sites wanting an elegant, tactile "made of light" centerpiece.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-light-cloth-mesh
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 LightClothMesh from '@crazygl/hero-light-cloth-mesh';

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

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

Screenshot Reflected in Chrome Waves

A product screenshot floats above a slow liquid-chrome ocean. Stacked Gerstner waves stretch its reflection across the surface while specular highlights migrate with the crests; pointer movement emits single-wavefront wake rings that distort the mirror in real time.

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.

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.

Sculpted Light Bust

A polished marble sculpture under studio lighting. The pointer orbits a single bright key light around the bust in real 3D, raking it across the stone face for hot specular highlights, cool subsurface shadows in the recesses, and a warm rim that tracks the cursor like a real museum spotlight.

Logo Reflected in Water

A glowing brand mark floats above a real 3D water plane. Perspective foreshortening, fog-attenuated distant reflection, and Schlick Fresnel sell the scene as photographic. Stacked Gerstner waves drive the surface; pointer wake rings and a continuous finger-press depression carve into the mirror.Live customizer

Light Cloth Mesh

Thread density93Threads per side of the woven mesh. 80 is the silk sweet spot; below 50 reads as a coarse net, above 120 the threads merge into a glowing sheet (and cost more).Cloth size15World extent of the woven sheet. The camera frames the sheet full-bleed at any size; larger sheets pack more folds into the same frame, smaller ones read as broader swells.Thread colour AColour of the crests / valleys low end. Cyan reads coldest and most premium.Thread colour BColour of the high crests. The cloth fades from A to B across its waving height.BackgroundDeep backdrop behind the glowing threads. Near-black makes the neon additive glow pop.Thread glow0.42Additive bloom on the crests. 0 = flat lines, 1 = silky glow, 2 = heavy bloom where threads cross.Wave height0.25Amplitude of the base waving. 0 = a flat sheet, 1.4 = a gently billowing silk, 4 = a storm-tossed banner.Wave speed0.34How fast the Gerstner waves travel across the sheet. 0 freezes the pose.Wave scale2.46Wavelength multiplier. Low = many tight folds, high = a few broad swells.Ripple strength0.58How deeply each wake ripple presses into the cloth. Faster pointer sweeps emit stronger ripples; 0 disables the wake entirely.Ripple speed0.82How fast each wake wavefront races outward from where it was emitted.Ripple width0.44Thickness of the expanding wavefront ring. Thin (0.1) = a crisp ring, wide (1.0) = a soft swell that relaxes back gently into the base wave.Camera tilt41°Angle the cloth recedes from the camera. Low = near top-down, high = a shallow grazing view down the length of the sheet.Transparent backgroundDrop the backdrop so the glowing cloth composites over your own page background.InteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.