Tilted Coverflow3D coverflow card carousel of seven tilted photos.
drag, click, or use the arrow keys
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/tilted-coverflowFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for “a navigation component from AI Canvas” inside Claude Code, Codex, or Cursor and it can suggest you a few options, then install the one you like. Less typing, lower token cost, modern way to build.
Get MCPAdd your token to your MCP server config so installs authenticate as your account:
AICANVAS_TOKEN=aic_••••••••About Tilted Coverflow
Tilted Coverflow is a 3D photo carousel built on CSS perspective and rotateY transforms, not Three.js. Seven cards fan out in a horizontal arc with a size gradient from center to edge; every card breathes on its own slow loop, and the focused caption fades in word by word when it lands in the middle. Drag, click any side card, or use the arrow keys to focus, and the row wraps circularly so three cards always sit on each side of center. Motion handles the springs and breathing; Tailwind covers layout. Suits portfolios, image galleries, or hero bands that want a tactile, image-forward interaction.
Built with
Frequently asked questions
- Is Tilted Coverflow free to use?
- Yes. Tilted Coverflow is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Tilted Coverflow?
- One command: npx shadcn@latest add https://aicanvas.me/r/tilted-coverflow.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Tilted Coverflow for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Tilted Coverflow built with?
- Tilted Coverflow is built with React and TypeScript, using Motion and Tailwind CSS. It ships with both light and dark styling.
- Where would I use Tilted Coverflow?
- Common uses include Image gallery, Portfolio, and Hero section. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Tilted Coverflow with AI?
- Yes. Tilted Coverflow ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas