Flip Gallery

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

Customise it with AI

Open Flip Gallery in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the gallery is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.