How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
The cloth
- The picture is wrapped onto a grid of 64 points across (and as many rows as the picture's proportions need), joined by springs. The top row is pinned; everything else is free.
- Each point is pulled back to flat by a "shape memory" spring (strength 42) and slowed by damping (0.925), so the cloth always settles flat.
- A gentle wind sways it, stronger toward the bottom edge (amplitude 0.6; 0.25 if the visitor prefers reduced motion).
- Neighbouring points are kept together by constraints (5 passes per step), so it bends like cloth and does not stretch like jelly. The simulation runs on a fixed 1/60 s step.
Pointer
- Hover: the cloth is nudged along with the pointer and dented away from the viewer in a soft circle around it, and the rainbow sheen brightens there.
- Press and drag: the points near where you pressed are grabbed (soft circle, radius 0.3) and follow the pointer, up to 45% of the picture's width, lifting toward you as you pull. Release and it springs back.
- Cursor: grab, then grabbing. On touch screens, dragging on the cloth moves it, so the page doesn't scroll while a finger is on the cloth; it scrolls everywhere else.
Look
- A thin-film rainbow colour is laid over the picture, stronger where the cloth is tilted, plus light and shade on the folds and a bright foil glint.
- A darker copy of the cloth sits just behind it so the edges and folds read as thick stock. Where it is drawn: the component is a box with the picture's proportions. The cloth is drawn on a canvas that is a little bigger than the box (40% of the box on every side, set by --tds-cloth-bleed), so a stretched cloth can reach past the edges without being cut off. The canvas ignores the pointer, so it never blocks the page around it. Fallbacks: the plain picture is in the page from the start. It is hidden once the cloth is running, and it stays visible if WebGL isn't available or the picture can't be read by WebGL. Reduced motion keeps the effect but with a much weaker wind. Demo page: just the cloth, centred on a near-black page, using a poster picture (a cream panel with a lake landscape and the word WANDERLUST) with transparent notched corners.