# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is a **prototype for an animated image gallery component** intended for integration into a Kirby CMS project. The animation displays images in a continuous scrolling pattern across multiple columns/rows.

## Running the Project

This is a PHP project with no build system. To run locally:
```bash
php -S localhost:8000
```
Then open `http://localhost:8000` in a browser.

## Architecture

### Configuration (index.php:1-28)

The animation is configured via PHP variables at the top of `index.php`:
- `$mode`: `'vertical'` or `'horizontal'` - scroll direction
- `$set`: Image set name (e.g., `'LEGACY'`, `'OLLY'`)
- `$secondsPerImage`: Controls animation speed
- `$imagesSets`: Associative array defining image paths per set

### Animation System

**CSS-based infinite scroll** using duplicated images:
- Images are rendered twice in each track (`index.php:63-68`) to create seamless looping
- Animation translates from 0 to -50% (or vice versa), jumping back invisibly when the duplicate starts
- Odd columns scroll down/right; even columns scroll up/left
- Column offsets and delays are calculated based on image count to stagger the animation

**Key CSS classes** (BEM notation):
- `.gallery-animation--vertical` / `.gallery-animation--horizontal`: Mode modifiers
- `.gallery-animation__wrapper`: Flex container for columns
- `.gallery-animation__column`: Individual scrolling lane
- `.gallery-animation__track`: Animated element containing images
- `.gallery-animation__image`: Individual image styling

**CSS custom properties**:
- `--animation-duration`: Total cycle duration (set via PHP)
- `--gap`: Spacing between columns/rows
- `--vertical-wrapper-width`: Container width in vertical mode

### Accessibility

Respects `prefers-reduced-motion` by disabling animations (`style.css:149-153`).

## Language

Code comments and documentation are in French.