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.
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
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
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.
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.
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
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
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.
Evixel Studio
