RTL Icon Flip

Create an RTL icon flip demo (directional icons that mirror when the layout flips). A toolbar of labeled icon tiles inside a container whose dir toggles between 'ltr' and 'rtl', controlled by a small segmented LTR/RTL toggle whose thumb slides between the two options with a spring (shared layout animation, stiffness 420, damping 32). When dir flips, the tile order reverses automatically (that is what dir does), and every DIRECTIONAL icon mirrors itself with an animated scaleX from 1 to -1 (spring stiffness 380, damping 24: the pass through 0 reads as a flip). Non-directional icons must not flip. Encode the rule visibly: mirror icons that encode reading direction - back/forward arrows, send, chevrons, undo/redo, list indentation. Never mirror: search, clock, media play, checkmarks, brand logos. Caption each tile ('mirrors' in the accent color / 'stays' muted) so the rule teaches itself. In production, drive this from the document direction (dir="rtl" on the html element) instead of a toggle, and apply the mirror with a CSS rule like [dir="rtl"] .icon-directional { transform: scaleX(-1) }. Accessibility: the toggle uses aria-pressed and a clear aria-label; icons keep their aria-labels unchanged (a mirrored 'back' is still 'back'). If prefers-reduced-motion is set, flip instantly with no spring. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.