iOS-like Cover Flow for React.
Built for the modern web with Motion and Tailwind.
Midnight Dreams
The Dreamers • 2024
Zero Layout Shift
Isolated transforms ensure the surrounding layout never jumps.
Touch Ready
1:1 gesture tracking with velocity-aware throwing.
Dark Mode Native
Optimized for deep blacks and vibrant highlights.
Fluid Physics Engine
Driven by real-time spring physics, not linear timelines. The motion feels weighty, responsive, and interruptible at any frame.
Keyboard First
Fully accessible with arrow key navigation and focus management.
Signature Reflections
The iconic mirrored-floor effect, one prop away. Tuned per browser for smooth performance.
Spatial Audio
Velocity-aware ticks pan across the stereo field as covers pass. Synthesized live — no sound files.
Auto-Responsive
Measures its container and scales covers, spacing, and gaps to fit. No breakpoints required.
Support this open-source work
Your sponsorship means a lot to open-source projects like this one.
Frequently asked questions
Everything about using the Cover Flow coverflow component in your React project.
What is Cover Flow?
Cover Flow is the iconic 3D carousel interaction Apple introduced in iTunes and iOS, where album covers fan out in 3D space and snap to center as you browse. This project is an open-source recreation of that coverflow effect as a React component, rebuilt with real spring physics instead of scripted animations.
How do I add a coverflow carousel to a React app?
Install the Cover Flow component with the shadcn CLI — npx shadcn add https://ashishgogula.in/r/coverflow.json — or from npm as @ashishgogula/coverflow. Then render the CoverFlow component with your items. It works in any modern React or Next.js App Router project.
Does it work with Next.js, Tailwind CSS, and shadcn/ui?
Yes. The component is written in TypeScript, styled with Tailwind CSS, follows shadcn/ui conventions, and supports dark mode via next-themes. Isolated 3D transforms mean the surrounding layout never shifts.
Is the coverflow component accessible?
Yes. It supports arrow-key navigation, focus management, and reduced-motion preferences, alongside drag, touch, click-to-snap, and horizontal scroll-wheel input.
How is this different from Swiper's coverflow effect?
Swiper's coverflow effect applies CSS transforms along a fixed timeline. This component drives every card with real-time, interruptible spring physics from Motion (Framer Motion), with velocity-aware throwing and 1:1 gesture tracking — so it feels like the original iOS Cover Flow rather than a slideshow transition.
Is it free to use?
Yes. Cover Flow is MIT-licensed and open source on GitHub, free for personal and commercial projects.