AI Toolkit · Carousels
Carousels / 12 pieces, 3 free
12 carousels in 3D for your AI tools
Cover flow, rings, a helix, a tunnel and more. Pick one, play with it and copy the prompt or the React code into Claude Code, Codex or your own language model. No extra packages needed: just React and Tailwind.
Cover flow with reflections
The classic: the centre cover faces you, the rest turn away in perspective, with a reflection underneath.
Prompt plus working code in one go. Paste it into Claude Code, Codex, Gemini, Copilot or Cursor.
Build a carousel: Cover flow with reflections. What it is: The classic: the centre cover faces you, the rest turn away in perspective, with a reflection underneath. Behaviour: - Row of 200 px square covers in 3D perspective (perspective 1100px): the centre one faces you, the covers on either side turn about 58 degrees away and stack closely together. - Under each cover a reflection: the same image flipped vertically, inside a container with a mask from 28% opacity to transparent. - Dragging with pointer events (mouse and touch) moves the row smoothly, also halfway between two covers; past the start and end it is elastic. Releasing snaps to the nearest cover, a fast flick moves one extra. Only capture the pointer after 6 px of movement, so a normal click reaches the cover. - Click a side cover to bring it to the centre. Horizontal trackpad swipes, the arrow keys, Home and End also work. - Below the row the title and subtitle of the active cover (aria-live="polite"), plus previous and next buttons with a counter like 05 / 09. Requirements: - Work in this project's stack. If it is React with Tailwind CSS, make a single component without extra packages; otherwise plain HTML, CSS and JavaScript. - Fully operable with keyboard and touch, with the right aria attributes. - Respect prefers-reduced-motion: less or no movement. - Use the colours, fonts and border radii of my project. - At the end, show me where the component lives and how to use it. - Put a short credit at the top of the file as a comment: "Based on the AI Toolkit by NinA AI Agency, https://www.nina-ai.nl/en/toolkit/carousels/coverflow". Keep it there.
All carousels
Every carousel has its own page with the prompt, the code and an explanation of how it works.
- 01FreeCover flow with reflectionsThe classic: the centre cover faces you, the rest turn away in perspective, with a reflection underneath.Drag
- 02Free3D image ringImages in a slowly turning ring. Drag it around and it keeps spinning with inertia.Drag
- 03With emailArc carouselCards on an arc, like a fan of playing cards. The centre one sits highest and the list loops.Drag
- 04With emailConcave carouselA row that curves around you, like a cinema screen. Built on plain scroll snap, so scrolling feels native.Scroll
- 05With emailVertical cover flow with detailsCovers that tilt top to bottom, with the details of the chosen cover on the right.Scroll
- 06With emailVinyl cover flowRecord sleeves in a row. Pick one and the record slides out and starts spinning.Click
- 07With emailBookshelfBook spines on a shelf. Click one and the book turns open to its front cover.Click
- 08With emailHelix towerCards spiralling upwards endlessly. Drag to turn it yourself.Autoplay
- 09FreeAutoplay with ring timerA cover flow that advances on its own. A ring around the pause button shows when the next one comes.Autoplay
- 10With emailTimeline scrubberA cover flow with a timeline below. Drag the handle along the years and the covers follow.Drag
- 11With emailTunnelImages hanging one behind the other in depth. Scroll or drag and you fly through them.Scroll
- 12With emailPicker drumA drum like the time picker on your phone, with a large preview of what you pick.Drag
How to put one in your own project
- 01
Pick and play.
Every carousel above is real: drag, click, scroll. Choose the motion that suits your page.
- 02
Copy for your AI tool.
One button copies the prompt plus a working React version. Paste it into Claude Code, Codex, Gemini, Copilot or Cursor.
- 03
Let your AI build it in.
The model adds your own images and texts and adapts colours and sizes. No React? It builds it in plain HTML, CSS and JavaScript.
Free, straight to your inbox
Unlock all 12 carousels
You can already play with everything. Leave your email and you also get the prompt and code of the 9 locked carousels. You get our newsletter on what happened in AI that week; unsubscribe anytime with one click.
- Prompt and code for all 12 carousels
- Works in Claude Code, Codex, Gemini, Copilot and Cursor
- One sign-up unlocks the whole AI Toolkit
Designed and built by NinA AI Agency, inspired by the cover flow collection of shadcnblocks.com. Free to use in your own projects; the credit in the code shows where it came from.