Return

Curtain Reveal

A cloth simulation rendered on canvas, pinned to a decorative rail at the top. The fabric grid uses verlet integration with distance constraints for realistic draping. Drag any point on the curtain and it parts to reveal what's behind it, then gently swings back to rest. The pleats are shaded by stretch ratio for depth.

curtain-reveal-preview

Loading preview...

Why it helps: A curtain reveal adds drama and surprise. It turns a simple show/hide into a tactile, satisfying interaction - users feel like they're physically pulling back a drape.

Also good to know:

  • -The grid is rebuilt on every resize, which can cause a brief flash on very large viewports
  • -3 constraint iterations per frame is enough for smooth draping but stiff fabrics may still stretch
  • -Pointer events only - no touch gesture support for swipe-to-reveal

Source

components/live/CurtainReveal.tsx
// Loading source...

Usage

example.tsx
import { CurtainReveal } from "@/components/live/CurtainReveal";

<CurtainReveal
  curtainColor="#8b1e3f"
  hintLabel="Drag to peek"
/>

Props

curtainColor"#8b1e3f"
string

Primary curtain fabric color.

curtainAccent"#4a0f22"
string

Secondary shade for pleat highlights.

railColor"#caa24a"
string

Color of the curtain rod and rings.

rows9
number

Number of rows in the cloth grid.

cols12
number

Number of columns in the cloth grid.

gravity260
number

Downward pull in px/s².

homeStiffness26
number

How strongly points return to rest position.

damping0.97
number

Velocity decay per frame (0-1).

pleatAmplitude9
number

How much the top row sags to create pleats.

dragRadius42
number

How close your cursor must be to grab a point.

hintLabel"Drag to peek"
string

Text in the hint pill at the bottom.

revealContentgradient placeholder
ReactNode

Content shown behind the curtain.

className-
string

Additional CSS classes.