# HandlePilot photo carousels

Three original sets of five slides: **The weekend journal**, **Off-duty club**, and **Everyday, observed**. Designed for 1080 × 1350, with responsive live HTML at any preview width.

Open [the source gallery](https://handlepilot.com/site/carousels/). Click a slide for a larger view; use the previous/next controls or arrow keys.

`source-files.zip` contains the editable gallery, renderer, CSS, nine JPEG photographs, fonts, licenses and credits. Unzip it and open `index.html` in a browser, or serve the folder locally. The source package excludes redundant AVIF copies and QA screenshots; the full workspace retains those separately.

## Editable source

- `carousels.js`: all text, slide structure, photo choices and crops. No whole-slide image rendering.
- `carousels.css`: scoped typography, paper shapes, stickers, layout and cropping. Every rule is scoped to `.hp-carousel` (apart from uniquely named font faces).
- `photos/`: browser-compatible JPEG photographs, scaled to at most 1600 px wide. These are actual photographs, not generated imagery.
- `fonts/`: vendored font files already used by HandlePilot (Inter, Archivo and Space Grotesk).
- `photo-sources.json`: photographer, source photo page, downloaded asset URL and license for every photograph.
- `index.html` / `studio.js`: independent gallery and keyboard-accessible preview.

Include `carousels.css` and `carousels.js`, then:

```js
const { decks, render, photo } = window.HandlePilotCarousels;
element.innerHTML = render('weekend', 0); // zero-based slide index
// Other keys: offline, noticed. Each deck has count: 5.
```

`render` returns one `.hp-carousel` element with an intrinsic 4:5 ratio and no interactive descendants, so it can sit inside an existing preview button. Text remains live DOM text. Its image URLs resolve relative to the script URL, so the renderer works in both the landing page and the standalone studio. The root is a CSS inline-size container: type, spacing, decoration and photo frames all scale from its own width.

For capture fixtures only: `index.html?export=1&deck=weekend&slide=0` shows a single 1080 × 1350 slide. `index.html?contact=1` is a compact contact-sheet view. Optional screenshot exports are previews; they are not the source or main landing renderer.

## Art direction and provenance

The three user-supplied Instagram references were inspected in the signed-in browser. They informed the use of genuine photography, paper labels, purposeful collage and concise type. Original copy, layouts and licensed photography were created for this demo; no reference post image, creator identity, endorsement or performance metrics were copied.

- https://www.instagram.com/p/Dc3nEXelLFR/ — travel scrapbook/photo overlays.
- https://www.instagram.com/p/Dc3OrY6FA_9/ — personal photo cover and object collages.
- https://www.instagram.com/p/DdMc0rcNv1K/ — clear visual grouping and selective color.

All nine photographs are from Unsplash, with their individual source pages recorded in `photo-sources.json`. [Unsplash license](https://unsplash.com/license). Photo use does not imply endorsement by the photographer or people pictured. These are illustrative sample posts, not claims that the photographed people use HandlePilot.

Photographers: Evan Verni, Kristijan Arsov, Freguesia de Estrela, Finde Zukunft, Eddie Kopp, Tim Tiedemann, Guillaume de Germain, Dan Freeman and Weichao Deng.