Modal Dialog

Features

• CRT power-on entrance — the dialog springs from a squashed horizontal scan line to full picture with a slight vertical overshoot, and collapses back to the line on close
• The tube screen stays dark in both themes; only the steel control-room ground around it changes
• OSD status row in squared uppercase type: channel, live Preview mode, and a blinking REC tally dot
• SMPTE color-bar strip drawn from seven dedicated design tokens
• Hardware-style HOLD and TAKE keys — sharp 4px rectangles that compress under the press
• Token-drawn scanline texture on the tube, no images and no glow
• Focus trapping with Tab / Shift+Tab wrap, Escape close, and focus restore to the trigger
• Fully respects prefers-reduced-motion

Accessibility

Dialog semantics

role="dialog" with aria-modal="true", aria-labelledby, and aria-describedby

Trigger affordance

aria-haspopup="dialog" and a descriptive aria-label on the trigger

Focus trap

Tab and Shift+Tab wrap within the dialog while open

Focus restore

Focus returns to the previously focused element on close

Escape to close

Document-level keydown handler while open

Overlay dismiss

Clicking the scrim outside the tube closes the dialog

Page heading

Visually hidden h1 labels the demo stage

Decorative art

The SMPTE bar strip and REC dot are aria-hidden

Focus indicators

:focus-visible outlines — primary ring on the page, bar-cyan ring on the tube

Reduced motion

prefers-reduced-motion: reduce disables all animations and transitions

Customise it with AI

Open Modal Dialog in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the dialog is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.