Most "grows on hover" UI fakes width with a scale transform, because animating layout properties is expensive. ImageAccordion transitions flex-grow on the panel itself. That's only safe because the whole system is small, bounded, and interaction-driven rather than continuous: five panels, one property, triggered once per hover.

Every panel is a single button (or anchor) that carries all of its own state through data-active. There's no separate "expanded" component. The image, the scrim, the label, and the caption are always in the DOM; only their filters and opacity/transform swap.

The image gets its own timeline (700ms transform, 550ms filter), slightly slower than the panel's own grow, so the zoom keeps drifting for a beat after the width settles instead of finishing in lockstep with it.

flexGrow flips between 1 and activeGrow (default 5) on onPointerEnter / onClick / onFocus, and the whole row redistributes along one 550ms cubic-bezier(0.22,1,0.36,1) transition. It is the same snappy-then-settling curve used across GodUI for anything that "arrives." onPointerLeave resets to defaultIndex, so moving off the whole strip always returns to a known panel rather than leaving whichever was last active stuck open.

The diagram loops the same mutual handoff: one slot takes the 5fr, the other three stay at 1fr, so the outgoing panel visibly compresses as the incoming one expands. (It drives that with grid-template-columns so a continuous loop doesn't thrash flex-grow forever.) The real component only pays the layout cost for 550ms per hover, then the row is stable again. Breaking the transform-only rule is fine here because the cost is bounded and discrete, and it buys a change that transform can't express cleanly.

Why not scale the active panel? A scale() on the active panel would zoom its content without changing how much horizontal space it occupies. The neighbors wouldn't compress, and the image would need a matching inverse-scale correction to avoid distorting alongside the container. Real flex-grow gets both effects (growth and compression) from a single property, at the cost of one bounded reflow instead of zero.

One state (active), one CSS transition, and every visual (width, image color, caption) reads it independently through data-[active=true]. Hover or tab across the panels above to see the full 550ms settle.