# Flip Gallery

> A data-driven 3D flip gallery of cosmic photography. Each card flips from a captioned photograph to an observation datasheet — instrument, exposure, coordinates, distance. Flips by click or keyboard, arrow-key roving, a skeleton loading seam, and a reduced-motion crossfade.

- Category: Gallery
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sienna
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: flip, 3d, keyboard
- Page: https://builder.atheros.ai/components/flip-gallery
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_flip_gallery/preview-596b8833999d.webp

## Features

- 3D card flip on the Y axis using `perspective`, `transform-style: preserve-3d`, and crisp `backface-visibility: hidden` on both faces
- Every card is a real `<button>`, so flips are triggerable by full-card click and by keyboard (Enter and Space) — never hover-only
- `aria-pressed` on each card reflects whether the observation datasheet is currently shown, and each flip is announced through a polite live region
- Arrow keys (Left/Right/Up/Down plus Home/End) rove focus across the gallery for full keyboard traversal
- Card fronts keep the photography dominant with a quiet caption bar — subject name plus a mono catalog designation like `M31 · NGC 224`
- Card backs are a refined tabular datasheet — instrument, exposure, focal length, RA/Dec, and distance in a mono, token-driven layout readable in light and dark
- Data-driven rendering — cards are declared once in `js/data.js` and rendered into an empty grid at runtime
- Async data seam — `fetchGallery()` in `js/api.js` returns a defensive `structuredClone` after a short latency, with a shimmering skeleton shown while it resolves
- Graceful image-error fallback — a broken photo degrades to a hue-tinted starfield gradient tile with a text label
- Respects `prefers-reduced-motion: reduce` — the 3D flip collapses to a gentle opacity crossfade with both faces reachable

## Accessibility

- **Gallery landmark** — `<main class="flip">` carries an `aria-label` naming the gallery
- **Keyboard flip** — Each card is a `<button>` so Enter and Space toggle the flip natively
- **Arrow navigation** — Left/Right/Up/Down and Home/End rove focus across the cards
- **Flip state** — `aria-pressed` reflects whether the datasheet is currently shown
- **Live announcement** — A polite `role="status"` region announces which face is visible after a flip
- **Descriptive label** — Each card button has an `aria-label` naming the subject, designation, and action
- **Busy state** — The grid sets `aria-busy` while the async seam resolves
- **Alt text** — Every photograph has a descriptive `alt` attribute
- **Focus indicators** — Cards expose a `:focus-visible` outline offset from the photo
- **Reduced motion** — `prefers-reduced-motion: reduce` swaps the 3D flip for an opacity crossfade

## Common questions

**Which frameworks is Flip Gallery available in?**

Flip Gallery ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Flip Gallery free?**

Flip Gallery is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Flip Gallery support dark mode?**

Yes. Flip Gallery ships light and dark themes, both drawn from the Sienna design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Flip Gallery live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/flip-gallery

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt