Iphone Carousel

Component 1

About

Apple-inspired video highlights carousel with GSAP animations, progress indicators, and smooth slide transitions.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Iphone Carousel to your project and fits it to your theme.

Code

How Iphone Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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" }}
    />
  );
}