A high-fidelity recreation of the classic iTunes Cover Flow interaction, built for the modern web using React, Next.js, Tailwind and Motion.
This project focuses on motion feel, spatial depth, and interaction fidelity rather than recreating visuals pixel-for-pixel.
- Supports click, drag, touch, keyboard, and horizontal wheel interactions with velocity-aware dragging and arrow-key navigation.
- Driven by motion springs for weighty, responsive, and fully interruptible animations.
- Uses hardware-accelerated CSS 3D transforms for smooth, refresh-rate-independent performance.
- Drops cleanly into shadcn-based projects via the CLI or manual install, following the same conventions and structure.
- Works seamlessly in modern React and Next.js environments, including App Router setups.
- Adapts gracefully to different container sizes and layouts by default.
- Styled with Tailwind CSS and compatible with next-themes for dark mode support.
- Isolated transform-based animations ensure the surrounding layout never shifts.
If this component helped you or inspired an interaction idea, a GitHub star is appreciated.
All installation methods, usage examples, and configuration details are documented here:
👉 https://coverflow.ashishgogula.in/get-started
This includes:
- shadcn CLI installation
- npm / pnpm / yarn / bun usage
- Manual setup
- Live examples
- Interactive playground with presets and real-time prop controls
- Props reference
Please read the contributing guide
Licensed under the MIT license.