Dual Scramble

Build two record fields that decode to new values at the same time. Structure: a small bordered card holding two fields side by side, each a caps mono label above a mono value. Something like STATUS: Queued becoming Shipped, and OWNER: Sam becoming Ravi. Use neutral placeholder names, never a real brand or person. The motion: one interval, about 45ms per tick. Track a settled index that advances every 3 ticks. Characters before the settled index show the real target glyph; everything after shows a random character from a set like ABCDEFGHIJKLMNOPQRSTUVWXYZ#@$%&*. The rules that make this work: 1. BOTH FIELDS RUN ON THE SAME CLOCK. One interval, one settled index, both values. Stagger them and it reads as two unrelated updates instead of one record changing hands, which is the entire reason to run two at once. 2. Use a seeded PRNG (mulberry32 with a fixed seed), NOT Math.random. Every visitor sees the same shuffle, screenshots are reproducible, and the demo never renders differently to two people looking at the same card. 3. Pad both values to the length of the longest before scrambling, then trim on settle. Otherwise the field changes width mid-decode and the whole card twitches. 4. Monospace for the values, or the effect fails: proportional type makes every random glyph a different width, so the line breathes in and out the whole way down. 5. The LABELS never scramble. They are the anchor that tells the viewer what is changing. Clear the interval both on settle and in cleanup. Make the card a button that swaps the values back, so the effect can be watched more than once. Accessibility: one aria-label on the card describing what it does. Do not put the scrambling text in a live region; it would announce dozens of nonsense strings a second. Under prefers-reduced-motion, set both fields to their final values immediately and start no interval at all. Colors as tokens: surface and border tokens for the card, muted ink for the labels, primary ink for the values. 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.