Hero241: Silk Drape Hero

A full-bleed hero over the silk-drape WebGL component, a length of silk hanging in deep folds from a few pins that swells in a slow breeze with cloth physics and a sheen along the weave, while a sweep of the cursor makes it ripple and swing; a serif headline, an intro and two buttons sit low on the left over a soft shade.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero241?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero241?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero241.tsx plus the silk-drape background and the button23 and button2 buttons it uses.

Quick start

The installed file exports hero241Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero241, hero241Demo } from "@/components/beste/block/hero241";

export default function Page() {
  return <Hero241 {...hero241Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hero241 } from "@/components/beste/block/hero241";

export default function Page() {
  return (
    <Hero241
      eyebrow="Silk ateliers on Lake Como"
      heading="Silk that moves before you do."
      description="Charmeuse, crepe and heavy duchess satin, woven on our own looms and cut by hand."
      buttons={[
        { label: "Book a fitting", href: "/fittings" },
        { label: "Browse the fabrics", href: "/fabrics" },
      ]}
      silk={{ color: "#1f5c4c", backgroundColor: "#07120f", sheen: 0.7, wind: 0.45, pins: 5 }}
    />
  );
}

Props

type ActionButton = {
  label: string;
  href: string;
};

Behavior notes

• Text is white over a radial shade from the lower left, so pick a mid to dark silk color for contrast.
• The cloth is pre-simulated for 150 steps before the first frame, so it arrives already hanging rather than dropping into place.
• Cursor sweeps stir the air when interactive is on; touch input is ignored so scrolling on a phone does not move the silk.
• The simulation pauses offscreen or in a hidden tab, and the pixel ratio is capped at 2 and lowered when frames run slow.
• With reduced motion, the silk holds one still frame and the copy skips its rise-in. Without WebGL, a striped CSS gradient in the silk color is shown.