3D Drape Text

Interactive 3D cloth-physics 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) Drag DrapeText onto your canvas and resize as needed. Enter your headline in the Text field. Set your typography styling under the Typography panel. Choose a background color or upload an image under Appearance. Adjust wind, gravity, and stiffness under Simulation to get your desired motion. Pick a pin mode to control how the cloth hangs or falls. 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.

Interactive 3D cloth-physics text