Perspective Carousel
Perspective Carousel is an image interaction in the UI HUB image interactions collection. A 3D perspective carousel where slides fan around a shared vertical axis: the active card faces forward while neighbouring cards rotateY by rotationStep per unit distance, scale down and fade. The track translates horizontally to centre the active slide.
The component is driven by 16 documented props (items, activeIndex, defaultActiveIndex, onActiveIndexChange, loop, slideWidth and 10 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Per-slide rotateY fan + active scale/opacity; Controlled/uncontrolled activeIndex with onActiveIndexChange; Keyboard ArrowLeft/ArrowRight handling.
Preview the image interaction in the browser above, copy the source, and paste it into your project. Image Interactions components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Perspective Carousel?
A 3D perspective image carousel with rotateY slide fan, loop, dots and keyboard navigation.
Perspective Carousel at a glance
- Category
- Image Interactions
- Pricing
- Free to use
- Libraries
- React, Framer Motion and Lucide React
- Language
- TypeScript
- Styling
- Tailwind CSS
- Configurable props
- 16
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Perspective Carousel works
A 3D perspective carousel where slides fan around a shared vertical axis: the active card faces forward while neighbouring cards rotateY by rotationStep per unit distance, scale down and fade. The track translates horizontally to centre the active slide. Navigation via clickable cards, prev/next buttons, dot pagination and ArrowLeft/ArrowRight keys; loop wraps indices. Supports controlled or uncontrolled activeIndex and returns null when there are no items.
Technical information for Perspective Carousel
| Category | Image Interactions |
|---|---|
| Libraries | React, Framer Motion and Lucide React |
| Styling | Tailwind CSS |
| Language | TypeScript |
| Rendering | spring physics |
| State change | slides fanned in perspective to selected slide rotated forward and centred with its label focused |
| Props | 16 configurable |
| Usage example | Included on this page |
What Perspective Carousel requires
- Per-slide rotateY fan + active scale/opacity
- Controlled/uncontrolled activeIndex with onActiveIndexChange
- Keyboard ArrowLeft/ArrowRight handling
- ARIA carousel region + aria-current slides
- Inherits HTMLAttributes (className etc.)
How to use Perspective Carousel
- Install the dependencies: npm install framer-motion and npm install lucide-react.
- Copy the usage example from the Source section of this page. It shows the import path and the props the component expects.
- Render <PerspectiveCarousel /> in your page using that import path.
- Pass any of the 16 documented props to change colours, density, speed or behaviour.
Perspective Carousel questions
What is Perspective Carousel?
A 3D perspective image carousel with rotateY slide fan, loop, dots and keyboard navigation.
How does Perspective Carousel work?
A 3D perspective carousel where slides fan around a shared vertical axis: the active card faces forward while neighbouring cards rotateY by rotationStep per unit distance, scale down and fade. The track translates horizontally to centre the active slide. Navigation via clickable cards, prev/next buttons, dot pagination and ArrowLeft/ArrowRight keys; loop wraps indices. Supports controlled or uncontrolled activeIndex and returns null when there are no items.
Which category does Perspective Carousel belong to?
Perspective Carousel is listed under Image Interactions in the UI HUB catalog. Image components that respond to the pointer: 3D tilt cards, cursor-following image trails, distortion and ripple transitions, draggable collages and hover-reveal stacks. These are built to sit inside real content grids, so they accept standard image props and keep alt text intact. Each one lists its transform maths in the props table.
What does the items prop do in Perspective Carousel?
Slides as { src, title, alt? }. It defaults to DEFAULT_ITEMS.
What does the activeIndex prop do in Perspective Carousel?
Controlled active slide index (uncontrolled when omitted). It defaults to undefined.
Is Perspective Carousel free to use?
Perspective Carousel is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Perspective Carousel use?
Perspective Carousel uses React, Framer Motion and Lucide React and is styled with Tailwind CSS.
What does Perspective Carousel need to run?
Perspective Carousel needs Per-slide rotateY fan + active scale/opacity, Controlled/uncontrolled activeIndex with onActiveIndexChange, Keyboard ArrowLeft/ArrowRight handling and ARIA carousel region + aria-current slides.