Silk Shader Hero Background

Heroes 13

About

Silk shader hero background: a full-bleed WebGL hero of drifting satin folds with a fine mesh and pulse rings that lean from the pointer and ripple on click, under a masked headline reveal. For fashion, luxury and product launches.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Silk Shader Hero Background to your project and fits it to your theme.

Code

How Silk Shader Hero Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import SilkMeshShaderHero from "@/components/ui/silk-mesh-shader-hero"

export default function Demo() {
  return (
    <SilkMeshShaderHero
      eyebrow="New — the Atelier 04 collection"
      title={"Light, *woven*\ninto motion."}
      description="Hand-finished silks dyed in small batches, cut to move with you and catch every lamp in the room."
      primaryCta={{ label: "Explore the collection", href: "#" }}
      secondaryCta={{ label: "Watch the film" }}
      caption={"Atelier 04\nAutumn / Winter"}
      palette="claret"
    />
  )
}