Hero made by @ybouane.

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

Demo

Reactive Gradient Silk

Install

npm install @crazygl/hero-gradient-silk

Usage

import GradientSilk from '@crazygl/hero-gradient-silk';

export default function Page() {
  return (
    <GradientSilk
      heading="Woven from light."
      colorA="#5b2a83"
      colorB="#1f7a8c"
      foldScale={1.0}
    />
  );
}

Customise

• Silk — colorA (plum), colorB (teal), colorC (rose crest), colorDeep (shadow valleys).
• Flow — flowSpeed, foldScale, foldContrast, sheen.
• Interaction — pointerDent, dentRadius (the soft cursor indentation).
• Backdrop — transparent to composite over your own page background.

Best for

• Premium SaaS, fintech and luxury landing pages.
• Jewellery, fashion, perfume and beauty brands.
• Anywhere wanting a quiet, expensive backdrop rather than a busy effect.

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.