SOIE is a fictional silk maison in Lyon. Its hero is not a video of fabric — it is fabric: a Verlet-integrated cloth simulation pinned along its top edge, breathing in a procedural draught, shaded with the physically-based sheen model made for textiles.
Silk sells by the hand — how it moves when touched — which no photograph can carry. So the page simulates the drape and lets the visitor disturb it. Everything else stays out of the way: a dark fitting-room, champagne accents, and copy in the voice of a house that has been right about fabric since 1873.
DM Serif Display — a didone with the poise of a Lyonnais label; italics for the words that drape.
Jost — body; a geometric sans that stays out of the silk's way.
| Element | How it works |
|---|---|
| Verlet cloth | A 34×44 particle grid integrated position-minus-previous-position, pinned at intervals along the top edge like a hung banner. Structural, vertical, and shear constraints relax over three Gauss–Seidel iterations per frame. |
| The draught | Two crossed sine fields push x and z with strength growing toward the free hem — the bottom billows while the pinned edge holds. |
| Touch | The pointer is unprojected onto the cloth plane; particles within its radius take a radial push, so a slow pass drags a wake across the silk. |
| Silk shading | MeshPhysicalMaterial with the sheen layer (the textile BRDF), a warm key light, plum rim, and a whisper of iridescence for the changeant effect. Normals recompute every frame so highlights slide along the folds. |
| Weave icons | Satin, twill, and organza drawn as literal SVG weave diagrams — floats, diagonals, and open plain weave. |
| Accessibility | Reduced motion computes one settled drape and holds it. All content is HTML text over the canvas. |
| You do | The page does |
|---|---|
| Move across the banner | The silk parts around your cursor and settles behind it |
| Wait | The workshop draught keeps the hem breathing |
| Read the weaves | Each card diagrams the actual thread structure it describes |