Modal — Focus Pull

Features

• Cinematic hero with a mono REC/scene timecode eyebrow, tight film-title heading, and a restrained inverted call-to-action
• One accessible dialog that reveals with the signature Focus Pull animation inside a 16:9 letterboxed media frame
• The box scales down from 1.28 while de-blurring, and the overlay animates a frosted backdrop-filter
• The letterbox header carries corner focus-ticks, a center focus reticle, a pulsing REC marker, and lens metadata instead of a gradient badge
• A mono timecode caption counts in with a clip-path wipe as the frame settles
• Dialog title, text, and actions pull into focus with staggered translateY and opacity
• Film-neutral palette — the interface is intentionally colorless, all depth comes from the dark letterbox and focus geometry
• Closes via the × button, Cancel, Got it, overlay click, or the Escape key
• Focus moves into the open dialog box and returns to the trigger on close, with a focus trap on Tab
• Responsive layout that stacks the dialog actions on small screens
• Fully respects prefers-reduced-motion

Accessibility

Dialog semantics

The dialog box carries role="dialog", aria-modal="true", and aria-labelledby pointing at its title

Decorative frame

The 16:9 media frame, corner ticks, reticle, REC marker, and timecode are aria-hidden decoration

Hidden state

The closed dialog is aria-hidden="true" and inert; JS flips both when opening

Focus management

The dialog box (tabindex="-1") receives focus on open; focus returns to the trigger on close

Focus trap

Tab and Shift+Tab cycle within the dialog while it is open

Trigger semantics

Native <button> trigger with aria-haspopup="dialog" and an explicit aria-label

Button labels

Every button — close, Cancel, Got it — has an explicit aria-label

Escape hatch

Escape key, overlay click, and three buttons all dismiss the dialog

Focus indicators

Global :focus-visible outline using the --ring token

Reduced motion

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

Customise it with AI

Open Modal — Focus Pull in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the modal 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.