🧠 Prompt Quiz

What type of animation system would you build for a navigation menu so that the active indicator curves along a parabolic arc above the bar when switching items, with the arc height scaling proportionally to the distance jumped, a 320-millisecond ease-in-out duration, and a faint preview arc visible on hover?

Build a CSS and JavaScript animation system for a React navigation menu. When a menu item is selected, the active indicator travels from the previous item to the new one along an arcing curved path rather than a straight line, following a parabolic trajectory above the menu bar. The arc height is proportional to the distance between the two items — short hops use a shallow arc, long jumps use a taller arc. The animation duration is 320 milliseconds with an ease-in-out cubic curve. Hovering over an item shows a preview arc in a lighter opacity.