Awesome Cinema Curtain Carousel

Awesome Cinema Curtain Carousel is a cinema-style curtain carousel component for React. It renders a full-screen, theatrical stage with animated curtains and slide transitions.

Install

npm install awesome-cinema-carousel

Watch the demo here

Usage (Static Data)

import React from "react";
import { AwesomeCinemaCurtainCarousel } from "awesome-cinema-carousel";
import "awesome-cinema-carousel/style.css";

/** @typedef {import('awesome-cinema-carousel').AwesomeCinemaSlide} AwesomeCinemaSlide */

/** @type {AwesomeCinemaSlide[]} */
const slides = [
  {
    id: 1,
    title: "Midnight Reel",
    director: "Ava Chen",
    genre: "NOIR",
    year: 2025,
    synopsis:
      "A detective follows a trail of missing film reels through a neon city.",
    tagline: "Every frame hides a secret.",
    rating: 5,
    imageUrl: "https://images.example.com/midnight-reel.jpg",
    accent: "#d6b25a",
  },
  {
    id: 2,
    title: "Signal at Dusk",
    director: "Luca Moreno",
    genre: "SCI-FI",
    year: 2024,
    synopsis: "A lighthouse keeper finds a broadcast that should not exist.",
    tagline: "The horizon is listening.",
    rating: 4,
    imageUrl: "https://images.example.com/signal-at-dusk.jpg",
    accent: "#9bc7ff",
  },
];

export default function App() {
  return <AwesomeCinemaCurtainCarousel data={slides} />;
}

Usage (apiEndpoint)

import React from "react";
import { AwesomeCinemaCurtainCarousel } from "awesome-cinema-carousel";
import "awesome-cinema-carousel/style.css";

type ApiResponse = {
  items: Array<{
    id: number;
    title: string;
    director?: string;
    genre?: string;
    year?: number;
    synopsis?: string;
    tagline?: string;
    rating?: number;
    imageUrl?: string;
    accent?: string;
  }>;
};

export default function App() {
  return (
    <AwesomeCinemaCurtainCarousel
      apiEndpoint="https://api.example.com/cinema/slides"
      apiHeaders={{ Authorization: "Bearer <token>" }}
      apiTransform={transform}
    />
  );
}

JSON File Example

If you prefer loading from a local JSON file (e.g. public/data/slides.json), you can point apiEndpoint at it and (optionally) add a small transform if the shape is wrapped.

{
  "data": [
    {
      "id": 1,
      "title": "Midnight Reel",
      "director": "Ava Chen",
      "genre": "NOIR",
      "year": 2025,
      "synopsis": "A detective follows a trail of missing film reels through a neon city.",
      "tagline": "Every frame hides a secret.",
      "rating": 5,
      "imageUrl": "https://images.example.com/midnight-reel.jpg",
      "accent": "#d6b25a"
    },
    {
      "id": 2,
      "title": "Signal at Dusk",
      "director": "Luca Moreno",
      "genre": "SCI-FI",
      "year": 2024,
      "synopsis": "A lighthouse keeper finds a broadcast that should not exist.",
      "tagline": "The horizon is listening.",
      "rating": 4,
      "imageUrl": "https://images.example.com/signal-at-dusk.jpg",
      "accent": "#9bc7ff"
    }
  ]
}

import { AwesomeCinemaCurtainCarousel } from "awesome-cinema-carousel";
import "awesome-cinema-carousel/style.css";

export default function App() {
  return <AwesomeCinemaCurtainCarousel apiEndpoint="/data/slides.json" />;
}

CSS

This package ships a global stylesheet that defines the cinematic theme, keyframes, and CSS variables.

import "awesome-cinema-carousel/style.css";

Props

| Prop | Type | Default | Description | | ----------------- | ---------------------------------------------------- | ----------- | ------------------------------------------------------ | | data | AwesomeCinemaSlide[] | undefined | Static slide data. If provided, no fetch is performed. | | apiEndpoint | string | undefined | URL to fetch slide data from. | | apiHeaders | Record<string, string> | undefined | Optional headers for the API request. | | apiTransform | (raw: unknown) => AwesomeCinemaSlide[] | undefined | Transform API response into slide data. | | curtainPanels | number | 5 | Number of fabric panels per side. | | curtainDuration | number | 1100 | Curtain open/close duration in ms. | | autoInterval | number | 5500 | Auto-advance interval in ms. | | onSlideClick | (slide: AwesomeCinemaSlide) => void | undefined | Called when the active slide is clicked. | | onSlideChange | (index: number, slide: AwesomeCinemaSlide) => void | undefined | Called after a slide transition completes. |

Type: AwesomeCinemaSlide

| Field | Type | Required | Description | | ---------- | ------------------------------------- | -------- | ----------------------------------- | | id | number | Yes | Unique slide id. | | title | string | Yes | Film title displayed on the screen. | | director | string | No | Director / subtitle line. | | genre | string | No | Genre or classification tag. | | year | string \| number | No | Year or rating badge. | | synopsis | string | No | Synopsis shown on screen. | | tagline | string | No | Pull quote or tagline. | | rating | number | No | Rating stars (1–5). | | imageUrl | string | No | Full-bleed screen image URL. | | accent | string | No | Accent color for title and decor. | | onClick | (slide: AwesomeCinemaSlide) => void | No | Per-slide click handler. |

Sample Data Structure

{
  "id": 1,
  "title": "Midnight Reel",
  "director": "Ava Chen",
  "genre": "NOIR",
  "year": 2025,
  "synopsis": "A detective follows a trail of missing film reels through a neon city.",
  "tagline": "Every frame hides a secret.",
  "rating": 5,
  "imageUrl": "https://images.example.com/midnight-reel.jpg",
  "accent": "#d6b25a"
}

Notes

The component is designed to occupy the full viewport using 100vw and 100vh. If you need it inside a constrained layout, wrap it in a container and apply CSS overrides to the root wrapper.

📊 Mock Data

If you need sample data to test your integration, you can use our pre-configured JSON mock file.

Direct Download

Click the button below to view or save the mock data file:

Download the Document

Note: If the file opens in your browser, just right-click and select "Save As..."