Bezel Frame

Accessibility

• A labelled input. Thinking shows as text in the field.
• Focus adds a blue field ring, not only light.

Motion

• A 1.5 px sky chrome ring drifts slowly round the bezel, the same ring as Metal Frame.
• Focus brightens the ring and the field ring turns blue, and send turns Primary.
• Thinking runs the bands 2.5 times faster.
• With animated off, reduced motion or no WebGL, the ring is a static CSS ring.

Responsive behavior

• 420 px wide, a 48 px field inside a 1.5 px ring with a 2 px inset, so 52 px tall on Web. 358 px and a 50 px field on Mobile.

Performance

• The ring is the shared Metal Frame shader, tinted with the sky and blue tokens. It runs only while on screen and the tab is visible.
• animated={false}, reduced motion and disabled draw a static CSS ring instead.

• Import BezelFrame. Props: label, placeholder, defaultValue, thinking, disabled, onSubmit, onStop, bend, animated.
• thinking swaps send for stop. Set it around your request.
• It is a single prompt for a hero search and composes Icon Button.