Hero made by @ybouane.

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

Demo

Light Cloth Mesh

Install

npm install @crazygl/hero-light-cloth-mesh

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.

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.