I rebuilt Apple’s iTunes Cover Flow for React to study motion and interaction

Modern UI is fast, clean, and efficient.
It’s also often a bit soulless.

Some older interfaces felt different. Apple’s iTunes Cover Flow is a good example. Not because it was flashy, but because it felt intentional. The motion had weight. The interaction responded to you.

I rebuilt Cover Flow for React to understand why that still works and what it teaches us about motion today.

Motion that responds, not just animates

Most UI motion on the web is timeline-based. It starts, runs, and finishes, regardless of how the user interacts.

That approach works for simple state changes, but it breaks down for interaction-heavy components. The moment a user tries to move faster than the animation expects, the illusion falls apart.

Cover Flow worked because it behaved like an object, not an animation. To recreate that feel, I used spring-based motion instead of linear timelines. Springs encode velocity and interruption, which makes motion feel responsive rather than scripted.

Small changes in spring tuning had a noticeable impact on perceived weight and intent.

Designing for interruption and input parity

Keyboard support wasn’t added at the end. It was a design constraint from the start.

If an interaction doesn’t feel right when controlled with arrow keys, it usually means the motion itself isn’t well defined. Designing for keyboard input early forced clearer snap points and more deliberate transitions. Touch and pointer interactions benefited from that same clarity.

Good motion survives the loss of the pointer.

Keeping the layout stable

Another important decision was isolating all movement to transforms. The surrounding layout never shifts.

When layout jumps during motion, users lose spatial context and depth collapses. By keeping the layout stable and moving only the items themselves, the interaction stays grounded even when the motion is expressive.

This helped the interface feel physical instead of performative.

Why this is open source

This project isn’t meant to be another generic carousel. It’s meant to be a reference for motion-first UI patterns where interruption, input parity, and feel are treated as first-class concerns.

If someone uses it directly, that’s great. If someone reads the code and applies the ideas elsewhere, that’s even better.

The component is also compatible with shadcn/ui, so it can be installed and styled within existing shadcn-based projects.

GitHub repository
https://github.com/ashishgogula/coverflow

Live demo
https://coverflow.ashishgogula.in

Good UI doesn’t just move. It reacts.

Rebuilding Cover Flow reinforced the idea that motion isn’t decoration. It’s part of the interaction contract. When it’s treated that way, even older ideas can still feel modern.