Cloth Peel Reveal

Shaders 32

About

Cloth peel page reveal transition in WebGL: a sheet of cloth covering your page is dragged away and crumples as it goes, folds travelling along a real 120x80 vertex mesh with each crease lit and a torn trailing edge. Use as a page gate or looping showcase. React only.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cloth Peel Reveal to your project and fits it to your theme.

Code

How Cloth Peel Reveal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import ClothPeelReveal from "@/components/ui/cloth-peel-reveal"

export default function Demo() {
  return (
    <ClothPeelReveal loop sheetText={"Make\nSomething"} sheetColor="#f4f2ee" textColor="#111111">
      <div className="flex h-full w-full flex-col justify-between bg-[#0b0b0c] px-[5vw] py-[5vh] text-white">
        <div className="font-mono text-[11px] uppercase tracking-[0.25em] text-neutral-500">
          Works 01 / 30
        </div>
        <div>
          <h2 className="text-[clamp(2.5rem,8vw,7rem)] font-black uppercase leading-[0.88] tracking-tight">
            Signal
            <br />
            Garden
          </h2>
          <p className="mt-6 max-w-sm font-mono text-xs uppercase leading-relaxed tracking-[0.15em] text-neutral-400">
            Interactive installation — the sheet is a mesh, the folds are lit per vertex
          </p>
        </div>
        <div className="font-mono text-[11px] uppercase tracking-[0.25em] text-neutral-600">
          Scroll
        </div>
      </div>
    </ClothPeelReveal>
  )
}