Installation
npx kinetic-ui-cli@latest add coverflow-slider
Usage
This component utilizes CSS 3D transforms (perspective and transform-style: preserve-3d) alongside Framer Motion's robust spring animations to create a fluid, depth-of-field carousel.
import { CoverflowSlider } from "@/components/creative/coverflow-slider";
const images = ["/image1.jpg", "/image2.jpg"];
export default function MyComponent() {
return <CoverflowSlider images={images} />;
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { CoverflowSlider } from "@/components/creative/coverflow-slider";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { CoverflowSlider } from "@/components/creative/coverflow-slider";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<CoverflowSlider
images="example"
/>
</div>
);
}