Umbrella In High Wind

You build physics toys, and you have held an umbrella in a gale.

Build me a single HTML page: a person holding an umbrella in wind that keeps getting stronger.

The build

• The wind rises over time, and I can drive it myself as well — slider, keys, your call — including back down.
• The umbrella answers the wind. The canopy flexes, the frame loads up, and past some point it turns inside out. It can be wrenched sideways, and it can get away entirely.
• Rain falls, and its direction and speed follow the wind.
• The person compensates: lean, grip, footing, bracing. They stay attached to the ground; the umbrella stays attached to them until it doesn't.
• Show the current wind speed on screen.
• The art is yours. Side view is the obvious choice and you do not have to take it.

House rules

• One file. Everything inline — no CDN, no external stylesheet, font, script or image. data: URIs are fine.
• No libraries. No physics engine — write your own.
• No network at runtime.
• No localStorage, sessionStorage, cookies or indexedDB — sandboxed frame, they throw.
• Return the file as exactly one fenced html block.

Answer in exactly these sections

The model

One paragraph, before the file: what the canopy is made of in your code, what inversion is as a state change, and what decides when it happens.

The page

The single fenced html block.

What it actually does

Where it looks right and where it looks wrong. Everyone who has held an umbrella knows what one does in wind, so say what yours gets wrong before I find it.