Motion Carousel

A carousel built on top of Embla Carousel with smooth Motion-powered animations. Each slide scales dynamically based on its active state, and the pagination uses animated pill-style dot buttons for an interactive, fluid experience.

Open in

Note: This carousel is built on top of Embla Carousel, which handles the sliding behavior internally. You can configure Embla through the options prop. Motion is only used for the slide scaling animation and the pill-style pagination. This is meant as an example rather than a fully flexible component, so feel free to modify the styling and animations as needed.

Installation

Usage

<MotionCarousel slides={SLIDES} options={OPTIONS} />

API Reference

MotionCarousel

Prop	Type	Default
`slides`	`number[]`	-
`options?`	`EmblaOptionsType`	-

Credits

Credits to David for this X post as inspiration