CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/gradient-silk

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.

ReactWebGLInteractiveFont#silk#fabric#gradient#folds#cloth#shader#luxury#premium#pointer#abstract

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

One command, zero config.

npm install @crazygl/hero-gradient-silk
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 ReactiveGradientSilk from '@crazygl/hero-gradient-silk';

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

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

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.

Slow Glitch Fabric

An elegant, controlled digital-signal background: deep moody bands drift like a damaged broadcast, always carrying a tasteful base glitch — blocky horizontal tears and red/cyan channel splits. Move the cursor and the glitch concentrates around its position, intensifying the tears and chromatic split right where you point, then eases back out when you leave.

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.

Artwork Lens

A clear glass DOME — a magnifying loupe / plano-convex lens — glides over a vibrant artwork with your heading composited on top. By default the artwork is an animated domain-warped colour field; supply your own image or video instead (cover-fit, never stretched). Beneath the lens everything is magnified UPRIGHT (not flipped like a glass marble), like a loupe sitting on the page: the centre magnifies cleanly, straight features curve more toward the rim, red/cyan chromatic fringing grows toward the edge, a Fresnel ring traces the rim and a specular hotspot sits upper-left. Because the heading is part of the scene, it reads normally outside the lens and is magnified, gently bent and chromatically split where the lens passes over it.

Magnetic Field Lines

Thousands of particles stream along smooth, divergence-free flow lines — a live visualisation of an invisible magnetic field. The pointer drops a new magnetic pole into the field; lines visibly bend, swirl, and repel around the cursor.

Iridescent Membrane

The whole background is a thin soap-bubble film — a translucent holographic membrane rendered with physically-based thin-film interference. Slow domain-warped flow drives the film thickness, so restrained pastel rainbows drift across the surface. The pointer presses on the membrane: the film stretches under the cursor and sends out concentric tension waves — single-wavefront ripples that perturb the thickness and shift the colour as they expand. Elegant, futuristic, premium.Live customizer

Reactive Gradient Silk

Colour A (plum)First jewel tone in the fold gradient. Carries the deepest mid-folds.Colour B (teal)Mid jewel tone. The cool counterweight that makes the silk read as dyed cloth rather than a single hue.Colour C (rose)Bright tone that catches the crest of each fold where the light lands.Shadow colourNear-black sitting in the deepest valleys between folds. Keep it very dark and slightly tinted for depth.Flow speed0.4How fast the folds drift. 0 freezes the cloth; ~0.4 is a slow elegant breathing; above 1.2 starts to feel restless.Fold scale1Size of the folds. Low = a few broad sweeping folds; high = many tighter creases. Sweet spot 0.8-1.3.Fold contrast1.4Crispness of the fold creases. Low is soft satin; high deepens the valleys and sharpens the ridges without hard edges.Sheen1Strength of the soft specular highlight that runs along each fold. 0 is matte velvet; ~1 is silk; above 1.5 is glossy satin.Pointer dent1How deeply the cursor presses into the silk. The folds bend toward the dent and the lighting follows. 0 disables the interaction.Dent radius0.3How wide the soft indentation spreads around the cursor (Gaussian falloff).Transparent backgroundInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.