UI component

Carousel

Tile-based gallery with background crossfade and keyboard arrows on active focus state. Best suited for showcasing playable worlds, modes or templates.

Stable sourcecarousel-v1

Live example

This demo uses real app destinations, so clicking a tile performs full MPA navigation.

Live demo loads after page hydration.

Quick start

Pass items with thumbnail and optional background media.

import { carouselItemsExample } from "./carousel.items.example";

<Carousel
  title="Worlds"
  items={carouselItemsExample}
  minHeight="380px"
  backgroundMode="hover"
  overlayMode="disabled"
  backgroundOverlayColor="rgba(0, 10, 20, 1)"
  backgroundOverlayOpacity={0.8}
/>

Full source

Versioned source snapshot for sharing and external usage.

Stable source snapshot: carousel-v1

import diamondThumb from "@assets/images/tiles/diamond.png";
import isleLabThumb from "@assets/images/tiles/isle-lab.jpg";
import poppyThumb from "@assets/images/tiles/poppy-field.png";

import forestVideo from "@assets/video/forest.mp4";
import waterVideo from "@assets/video/water.mp4";
import poppyVideo from "@assets/video/poppy_field.mp4";

export type CarouselItemExample = {
  id: string;
  name: string;
  url: string;
  thumb: string;
  bgMode?: "image" | "video";
  videoSrc?: string;
  label?: string;
  disabled?: boolean;
};

export const carouselItemsExample: CarouselItemExample[] = [
  {
    id: "diamond",
    name: "Diamond Collector",
    url: "/diamond-collector",
    thumb: diamondThumb,
    bgMode: "video",
    videoSrc: forestVideo,
    label: "Diamond Collector",
  },
  {
    id: "isle-lab",
    name: "Isle Lab",
    url: "/isle-lab",
    thumb: isleLabThumb,
    bgMode: "video",
    videoSrc: waterVideo,
    label: "Isle Lab",
  },
  {
    id: "world-1",
    name: "Poppy Field",
    url: "/world-1",
    thumb: poppyThumb,
    bgMode: "video",
    videoSrc: poppyVideo,
    label: "Poppy Field",
  },
];

Implementation notes

Use absolute app URLs for MPA transitions (/world-1, /isle-lab).
disabled: true marks tile as non-clickable with dimmed state.
Overlay and background intensity are configured through props and CSS variables.
Item configuration is included in the published source snapshot.
Full source below is versioned snapshot intended for sharing.