Cloth Interactive

Cloth Interactive Component for Framer is an interactive 3D fabric and flag simulation component designed for Framer and React applications. Built using custom WebGL2 shaders and physics-based wave propagation algorithms, it transforms static HTML, Framer layers, or image textures into dynamic, reactive cloth meshes with custom lighting, shadows, and physical dynamics.

Technical Highlights

• Physics Simulation Engine: Implemented via grid displacement calculations (SEG = 96), simulating realistic wave propagation, wind drift, damping, stiffness, and drape dynamics.

• Custom WebGL2 Shaders:

  • Vertex Shaders: Render real-time grid displacement, perspective shifts, focal depth, and surface normal maps.

  • Fragment Shaders: Deliver directional lighting, sheen highlights, fabric depth shading, edge hem fading, and volumetric drop shadows using Signed Distance Functions (SDF).

• Interactive Touch & Pointer Imprint: Responds dynamically to cursor and pointer movements across the cloth surface with configurable brush size and force.

• Canvas Capture Systems: Converts internal HTML/DOM nodes into a dynamic texture using native canvas element painting or inline SVG context capture, with fallback support for direct image URLs (textureImage).

• Resource Management: Built-in handling for webglcontextlost / webglcontextrestored, low-power / reduced-motion accessibility rules (prefers-reduced-motion), automatic ResizeObserver dynamic resizing, and cleanup on unmount.

• Framer Integration: Features full Framer property control bindings (addPropertyControls), static server-side rendering detection via useIsStaticRenderer(), and localized layout clipping prevention through bleed canvas margins.

Need help?

Have questions, need custom features, or want to share feedback? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.