Ranked bars

Make it fit your project.

Build an eight-second horizontal bar chart for four supplied categories. Interpolate numeric values between two snapshots, sort rows at each frame, and ease each row toward its current rank. Keep labels and values outside the bars and use a shared fixed axis.

Build and check.

1. Confirm the supplied content, target environment, and required assets before implementing.
2. Build an eight-second horizontal bar chart for four supplied categories. Interpolate numeric values between two snapshots, sort rows at each frame, and ease each row toward its current rank. Keep labels and values outside the bars and use a shared fixed axis.
3. Expose seek(t) so frames can be inspected deterministically; add play, pause, replay, and a reduced-motion still.
4. Inspect the opening, midpoint, and final state at desktop and mobile sizes; report any dependency or output limitation.

Know the limits.

• Show units, dates, and source. Never change the axis scale silently to exaggerate differences.
• 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.