Metal Frame

Accessibility

• Decoration only: the field inside carries the label.
• Focus is never only the glow: Metal adds a halo.
• Announce Thinking as text in the field.

Motion

• Light and dark bands drift round the 1.5 px ring, about one turn in 8 s, drawn by a WebGL shader.
• A mouse pointer within 48 px swells the edge up to 3 px toward it and brightens the metal there, easing in about 240 ms. Touch never bends it.
• Thinking runs the bands 2.5 times faster while a soft ink glow breathes over 2.4 s.
• With animated off, reduced motion, disabled or no WebGL, a static CSS chrome ring takes its place.

Responsive behavior

• Box 320 by 120, Pill 44 high, Circle 44 on Web. Pill 48 and Circle 48 on Mobile.

Performance

• The ring is one WebGL shader on a canvas that reaches 10 px past the box. It creates its context only while on screen and releases it 2 s after leaving, so a long page never holds many contexts.
• It stops drawing when the tab is hidden, caps the pixel ratio at 2 and keeps every per frame value out of React state.
• animated={false}, reduced motion and disabled skip WebGL entirely and draw a static CSS ring.

• Import MetalFrame. Props: shape (box, pill, circle), thinking, disabled, animated, plus strength, ringCssPx, borderRadius, paused, bend, innerShadow and theme.
• It wraps anything and adds no field of its own. Box suits a surface, Pill a field, Circle an Avatar.
• Set thinking while a request runs. Use strength 0.55 and paused for an idle surface, as the Todo List frame does.