3D Drape Text

DrapeText is a fully interactive 3D component that renders your text on a realistic, physically-simulated cloth surface. Built with Three.js and Verlet integration physics, the cloth responds to wind, gravity, and user interaction in real time — visitors can click and drag the fabric to see it ripple and fold naturally.

Features

• Real-time cloth physics simulation (wind, gravity, stiffness)

• Custom text overlay with full typography controls (font, weight, size, line height, letter spacing, color)

• Solid color or custom image background for the cloth surface

• Adjustable material roughness and metalness for realistic shading

• Multiple pinning modes: top, left, right, both edges, top-right, or free-falling

• Optimized for performance with static rendering support for canvas/export

Prop Controls

• Text — the headline or message displayed on the cloth

• Typography — font family, weight, size, line height, letter spacing, and text color

• Appearance — choose solid color or image background, plus roughness and metalness sliders

• Simulation — wind strength, gravity, stiffness, and pin mode

How to Use (Quick Start)

1. Drag DrapeText onto your canvas and resize as needed.

2. Enter your headline in the Text field.

3. Set your typography styling under the Typography panel.

4. Choose a background color or upload an image under Appearance.

5. Adjust wind, gravity, and stiffness under Simulation to get your desired motion.

6. Pick a pin mode to control how the cloth hangs or falls.

7. Publish — visitors can drag and interact with the cloth directly on your live site.

Tip: For a subtle effect, use lower wind and higher stiffness. For a dramatic, flag-like motion, increase wind and lower stiffness.