Shared-element tabs

Make it fit your project.

Implement the ARIA tabs keyboard pattern. Measure the selected tab and animate one absolutely positioned underline to its left offset and width over 180ms. Update measurements after resize or font loading, and keep panel content stable during the transition.

Build and check.

1. Confirm the supplied content, target environment, and required assets before implementing.
2. Implement the ARIA tabs keyboard pattern. Measure the selected tab and animate one absolutely positioned underline to its left offset and width over 180ms. Update measurements after resize or font loading, and keep panel content stable during the transition.
3. Implement idle, active, keyboard, touch, reduced-motion, and failure states as relevant.
4. Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.

Know the limits.

• Selection must still work when animation is disabled and when labels wrap.
• The prompt guides a coding agent; output quality depends on its implementation and review.

Want us to build it?

Send an optional project brief. We’ll receive your contact details, project description, and this recipe’s ID.