---
name: perspective-card-carousel
description: Generate an offline three-dimensional card carousel with original geometric posters, swipe navigation, keyboard controls, project dialogs, and pauseable autoplay. Use for portfolio, collection, and editorial showcase prototypes.
---

# Perspective card carousel

Create a standalone HTML collection with seven illustrated cards arranged on a perspective arc. Selecting a side card centers it; selecting the center card opens its study notes. Use the arrows, slide selectors, keyboard, or horizontal drag to browse.

## Generate

Python 3.10+ and a modern browser are sufficient. No packages, remote assets, fonts, or network access are required.

```bash
python3 scripts/generate.py -o out/index.html
python3 scripts/generate.py --brand "Studio Arc" --title "Different viewpoints" --accent "#d6ef82" --speed 0.5 -o out/custom.html
python3 scripts/generate.py --params params.json -o out/index.html
```

CLI options override JSON parameters. Keep `scripts/` and `templates/` together; `preview.html` is the default generated page.

| Parameter | Accepted values |
| --- | --- |
| `brand`, `title`, `subtitle` | Plain text, 1–180 characters |
| `accent` | Six-digit hex color |
| `speed` | Number from 0 to 2; autoplay interval is 6000/speed milliseconds, zero disables autoplay |

HTML-like text is escaped. Invalid or unknown parameters cause an error. Change the artwork, project labels, and descriptions together inside the template when adapting the actual collection; text parameters do not replace those sample projects.

## Interaction details

A single normalized position drives the arc. Shortest-distance wrapping makes the last card connect to the first. Dragging temporarily uses a fractional position; release snaps to the nearest index. Native buttons expose previous, next, individual slides, and the selected card. Left/Right and Home/End operate while the carousel is focused. The center card opens a native dialog, and Escape closes it.

Autoplay pauses while the carousel holds keyboard focus, a dialog is open, the user drags, or the tab is hidden. The pause button controls it explicitly. Reduced motion disables autoplay and makes selection changes immediate. Vertical touch gestures remain available for page scrolling.

Read [references/design.md](references/design.md) before changing geometry or lifecycle. The artwork is original SVG geometry; this is a demonstration collection, not a photo gallery or connected CMS.

## Verify

Generate both default and customized files. At desktop, 390px and 320px widths, verify next/previous, all seven slide selectors, wraparound, keyboard controls, drag cancellation, center-card details, Escape, and the pause button. Verify reduced motion, no page overflow, no browser errors, and offline operation.