Cloth Reveal

$ pnpm dlx shadcn@latest add @remocn/cloth-reveal

Usage

ClothReveal covers its children with a sheet of cloth. The sheet rests on a soft bump in the middle, as if draped over the hidden object, with seeded folds and waves so it never looks ironed. On the tug frame a hand pinches one corner, lifts it, and yanks it off-frame with growing speed. The rest of the sheet follows as a mass-spring cloth: it peels up, folds over to show its darker underside, flutters, and casts a soft shadow on the content below.

import { ClothReveal } from "@/components/remocn/cloth-reveal";
 
export const Unveil = () => (
  <ClothReveal direction="right" clothColor="#1F3A93" undersideColor="#0E1C4A">
    <YourLogo />
  </ClothReveal>
);

Children are centered in the frame on top of background. direction picks the corner and the pull:

delay is the tug frame at 30 fps. seed changes the fold pattern and waves of the resting sheet.

clothColor and undersideColor are parsed as hex (#RGB or #RRGGBB) to light the cloth per vertex, so CSS names, rgb() and gradients are not supported.

Timing

At 30 fps, speed={1} and the default delay of 6:

The cloth is simulated for 72 frames at 30 fps, which covers any delay up to about 38. speed scales the timeline after the simulation, so it does not change how the cloth moves.

This is one of the heavier components in the registry. The simulation, a 40×24 grid with 12 constraint passes per step, runs once per composition size, direction, delay and seed. Each frame then draws about 900 shaded SVG quads through two blur filters. Expect slower renders than a CSS-only reveal, and use it once as the payoff rather than on every scene.