Rotating Cards
A cinematic, high-performance circular gallery built with Framer Motion. It features zero-react-render physics loops, smooth momentum-based dragging, mouse wheel support, and premium 3D hover effects.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Features
- Physics-Based Momentum: Smooth starting, stopping, and "throwing" interactions.
- Zero-Render Loop: Uses
useAnimationFrameanduseMotionValuefor 120fps performance without React re-renders. - Draggable & Mouse Wheel: Multiple ways to interact with the gallery.
- 3D Hover Effects: Cards tilt and scale with dynamic shadows on hover.
- Infinite Auto-play: Configurable speed and direction.
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
cards | RotatingCard[] | [] | Array of card objects (id, content, background, img). |
radius | number | 360 | The radius of the circular path. |
duration | number | 20 | Time for one full rotation in seconds. |
cardWidth | number | 160 | Width of each card. |
cardHeight | number | 190 | Height of each card. |
pauseOnHover | boolean | true | Pause auto-play when hovering. |
draggable | boolean | false | Enable mouse/touch dragging. |
autoPlay | boolean | true | Enable continuous rotation. |
mouseWheel | boolean | false | Enable rotation via mouse wheel scroll. |
reverse | boolean | false | Reverse the rotation direction. |
RotatingCard Type
Loading...
Tip: Use Alt + ← / → to navigate