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:

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.

2 KiB Raw Blame History