SilkUnveil
Interactive Verlet cloth physics unveil with dynamic fold-compression shading, organic breathing wind, and pulled-away silk drape.
On This Page
Pro Objects
SilkUnveil
Interactive cloth physics unveil component based on Verlet integration. Features a 12×15 procedural fabric mesh with dynamic fold compression shading, continuous organic breathing wind, and spring-gathered top anchors pulled away on command. No external physics engines or image textures used.
npx nexoreui add silk-unveil
Interactive Playground
Vintage Gullwing 300SL
Configure Props
Product Width56%
Usage Examples
1. Vintage Gullwing 300SL — Midnight Navy & Silver Silk (4/3)
Collector's automotive launch presentation with wide 4/3 aspect ratio, physical shadow ellipse, and deep navy silk drape.
component.tsx
1
2. Architectural Flacon Perfume — Royal Crimson & Champagne Gold (3/4)
Haute couture luxury cosmetics reveal with tall 3/4 aspect ratio and gold-highlighted burgundy fabric.
component.tsx
1
3. Aerodynamic Sneaker — Obsidian & Violet Silk (4/3)
Sportswear athletic footwear reveal with wide proportions and iridescent purple textile physics.
component.tsx
1
4. Studio Acoustics Headphones — Crimson & Gold (3/4)
Audio hardware reveal with draped cloth gathering in folds around the headphones.
component.tsx
1
5. Cybernetic Smartwatch — Emerald Noir & Jade Sheen (3/4)
Jewelry-grade horology presentation with emerald cloth drape and natural gravitational settling.
component.tsx
1
API Reference (Props)
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | required | Transparent PNG image URL of the product silhouette. |
| aspectRatio | string | "3/4" | Stage aspect ratio. Use "4/3" for wide products like cars or keyboards, and "3/4" for tall silhouettes. |
| productWidth | string | "52%" | Width of the product image relative to the stage width. |
| clothDark | [number, number, number] | [96, 20, 34] | RGB dark base shadow tone of the silk fabric. |
| clothLight | [number, number, number] | [214, 172, 102] | RGB highlight sheen tone of the silk fabric. |
| defaultUnveiled | boolean | false | Whether the fabric is already pulled away upon initial component mount. |
| alt | string | "Unveiled Product" | Accessibility image description. |