Apple-inspired video highlights carousel with GSAP animations, progress indicators, and smooth slide transitions.
import {HighlightsSection} from "@/components/ui/iphone-carousel"
import type {VideoSlide} from "@/components/ui/iphone-carousel"
export const defaultSlides: VideoSlide[] = [
{
id: 1,
textLists: ["Enter A17 Pro.", "Game-changing chip.", "Groundbreaking performance."],
video: "https://cdn.21st.dev/assets/mirror/22/223742f4e334ee459931b2b6a9d939f7dee9caeecb4d60cb99296ea6ad569ddb.mp4",
videoDuration: 4,
},
{
id: 2,
textLists: ["Titanium.", "So strong. So light. So Pro."],
video: "https://cdn.21st.dev/assets/mirror/ec/ec520dfac95e9d44f7d76b0d54f202db916eac5af485c7af5b7117c05f160a68.mp4",
videoDuration: 5,
},
{
id: 3,
textLists: ["iPhone 15 Pro Max has the", "longest optical zoom in", "iPhone ever. Far out."],
video: "https://cdn.21st.dev/assets/mirror/15/15009dc2efd6ff513a6353fbe3b37f17b01f59c04c5b41acdc24b512243a774c.mp4",
videoDuration: 2,
},
{
id: 4,
textLists: ["All-new Action button.", "What will yours do?"],
video: "https://cdn.21st.dev/assets/mirror/54/542a07b501c5918cfecc3e1ead5275cc28e4d55f786ff6a4079274867d614754.mp4",
videoDuration: 3.6,
},
];
export default function DemoOne() {
return (
<HighlightsSection
slides={defaultSlides}
videoOffsets={{ 2: "translate-x-44" }}
/>
);
}