Targeting
No library Intermediate
Four L-shaped corner brackets animate inward and lock around the selected option like a targeting reticle. The option glows amber inside the locked frame. Unselected options show retracted ghost brackets.
Four L-shaped corner brackets animate inward and lock around the selected option like a targeting reticle. The option glows amber inside the locked frame. Unselected options show retracted ghost brackets.
Goal: Create a "Targeting" radio group animation.
Visual behavior: A gaming HUD radio group with 3 options in monospace uppercase. Each option has four L-shaped corner bracket spans (8×8px, 2px amber #f59e0b border on two sides). Unselected: brackets are offset outward by 6px and dim (opacity 0.2). Selected: brackets animate inward to offset 0 with spring cubic-bezier (0.34,1.56,0.64,1), glow amber, and the row gets a subtle amber background tint. The radio dot glows amber on select.
Technique: React useState tracks selected option. Each bracket span uses inline style transitions on top/bottom/left/right properties to create the inward lock animation. The bracket's position properties transition from offset:6 to offset:0. Four corner bracket spans per option row, absolutely positioned inside the relative label. No library dependencies.
Accessibility: Hidden native <input type="radio"> per option, shared name attribute. Keyboard-navigable. Bracket position transition can be skipped under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.