Tearable Cloth

⚡OCT 20 UPDATE: Tearable Cloth is now 100% free. The $1 listing here is simply an optional platform minimum—otherwise, the entire component is 100% free for everyone.🎁

Websites feel like glass. This gives them weight.

Drop in any photo, poster, or graphic. It instantly gains physical tension, gravity, and touch. Visitors can stretch it, ripple it, or slice clean through it with fluid WebGL physics.

Two states of matter

Destructible

Swipe to slice or pull until it snaps. Real-time stress calculations sever constraints under tension, letting torn remnants cascade with natural gravity.

Indestructible

Turn tearing off. The cloth transforms into an unbroken elastic membrane that ripples, stretches, and snaps back the moment you let go.

Precision vector slicing

Tearable Cloth tracks the vector path between pointer frames, ensuring fast swipes never miss a cut on mobile or desktop

Slice on Drag: Instant single-swipe cutting

Drag & Cut: Left-click pulls tension; right-click shears

Eight points of structure

Anchor your canvas however your layout demands:

Perimeter Edges: Pin Top, Bottom, Left, or Right

Individual Corners: Pin single corners

Engineered for production

Adaptive Mesh Density: Automatically calculates square spring cells based on container scale for uniform fabric drape.

Hardware-Accelerated WebGL: 60–120 FPS performance with 0% CPU sleep when scrolled out of view.

Universal Aspect Ratio: Shapes naturally to any portrait, landscape, or square asset with zero distortion.

Autonomous Reset: automatically reconstructs the cloth once torn away.

Canvas Controls

Tearable: Toggle between destructible cloth and elastic fabric.

Action: Slice on Drag / Drag & Cut.

Auto Reset & Delay: Timed respawn after collapse.

Pin Configuration: 4 independent edges + 4 individual corners.

Physics Engine: Gravity, Mesh Detail, Air Resistance, Drag Reach, Cut Radius, and Solver Accuracy.

---

Need support?

Contact: contact@valorsic.studio

Crafted by valorsicstudio